基于Vue+ElementUI的商场后台管理系统day13

• 实现确定添加参数和添加属性功能

    //添加确定
    addParams() {
      this.$refs.addFormRef.validate(async valid => {
        if(!valid) return
        const { data: res} = await this.$http.post(`categories/${this.cateId}/attributes`, 
        {
          attr_name: this.addForm.attr_name,
          attr_sel: this.activeName
        })
        if (res.meta.status !== 201) {
          return this.$message.error('添加参数失败！')
        }
        this.$message.success('添加参数成功！')
        this.getParamsData()
        this.addDialogVisible = false
      })
    }

• 实现修改按钮
• 实现删除按钮
  通过作用域插槽scope.row获取到请求需要的参数
• 实现展开列
  先要对拿到的数据处理，将字符串分割成数组元素，重新赋值
  split() 方法
  把一个字符串分割成字符串数组

//切割字符串
      res.data.forEach(item => {
        item.attr_vals = item.attr_vals.split(' ')
      });
      console.log(res.data);

分割结果

            <!-- 展开行 -->
            <el-table-column type="expand">
              <template slot-scope="scope">
            <!-- 循环渲染 -->
                <el-tag v-for="(item, i) in scope.row.attr_vals" :key="i" closable>
                  {{item}}
                </el-tag>
              </template>
            </el-table-column>

一个小问题
当新增一个参数时，它的展开行是空的，但是会被渲染出一个空标签

出现空标签
这是因为在之前进行字符串分割时，如果是对空字符串进行空格分割，那么它的分割结果是返回一个空字符串的数组
控制台输出结果
解决办法是加一个三元表达式判断

//切割字符串
      res.data.forEach(item => {
        item.attr_vals = item.attr_vals ? item.attr_vals.split(' ') : []
      });
      console.log(res.data);

• 实现文本框按钮的显示与隐藏
  elementUI源码

<el-input
  class="input-new-tag"
  v-if="inputVisible"
  v-model="inputValue"
  ref="saveTagInput"
  size="small"
  @keyup.enter.native="handleInputConfirm"
  @blur="handleInputConfirm"
>
</el-input>
<el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>

• 解决按钮文本框数据同步问题

  
  两个文本框同步了
  

  为它们绑定不同的inputVisible、inputValue

      //切割字符串
      res.data.forEach((item) => {
        item.attr_vals = item.attr_vals ? item.attr_vals.split(" ") : [];
        //控制文本框的显示与隐藏
        item.inputVisible = false
        //文本框中输入的值
        item.inputValue = ''
      });

• 让文本框自动获得焦点

// 让文本框自动获得焦点
      // $nextTick 方法的作用，就是当页面上元素被重新渲染之后，才会指定回调函数中的代码
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus()
      })

• 实现文本框与按钮的切换
  trim() 方法
  去除字符串的头尾空格

    //文本框按钮失去焦点事件
    handleInputConfirm(row) {
      //判断用户输入是否合法
      if(row.inputValue.trim().length === 0) {
        row.inputValue = ''
        row.inputVisible = false
        return
      }
      this.inputVisible = false

    },

• 发起请求
• 删除标签
  splice() 方法
  splice() 方法用于添加或删除数组中的元素。
  注意：这种方法会改变原始数组。

//删除标签
    handleClose(i, row) {
      row.attr_vals.splice(i, 1)
      this.saveAttrVals(row)
    },

• 提交代码
  git add . --> git commit -m "" --> git push
  git checkout main --> git merge --> git push

5.3.1 实现商品分类参数

• 创建分支
  git checkout -b goods_list --> git push -u origin goods_list