element ui Tag 动态添加标签

1.首先调接口获取到标签列表，

 // 级联选择器如果选择的不是第三级菜单
    async getParamsData() {
      if (this.selectedCateKeys.length !== 3) {
        // 级联选择器不会有参数，下面的面板也都为空
        this.selectedCateKeys = []
        this.manyTableData = []
        this.onlyTableData = []
        return
      }
      // 如果选中的是三级分类
      console.log(this.selectedCateKeys)
      // 根据所选分类的Id，和当前所处的面板，获取对应的参数
      const { data: res } = await this.$http.get(`categories/${this.cateId}/attributes`, {
        params: { sel: this.activeName },
      })

      if (res.meta.status !== 200) {
        return this.$message.error('获取参数列表失败！')
      }
      //将获取到的参数做处理
      res.data.forEach((item) => {
        // 将res.data的参数做处理 --------------------------  attr_vals记住这个，对标签进行增删都要用它
        // item.attr_vals = item.attr_vals ? item.attr_vals.split(' ') : []
        item.attr_vals = item.attr_vals.length === 0 ? [] : item.attr_vals.split(' ') //split(' ')表示将字符串转为数组，因为 attr_vals里面已经有都好进行分隔，所以这里不需要写逗号
        //有了这个，相当于给每个数据加上了文本显示与隐藏的属性,在插槽里面就可以直接调用到，就不会造成之间的相互影响了
        item.inputVisible = false
        //有了这个，相当于给每个数据加上了文本框值属性,在插槽里面就可以直接调用到，就不会造成之间的相互影响了
        item.inputValue = ''
      })

      console.log(res.data)
      if (this.activeName === 'many') {
        this.manyTableData = res.data
      } else {
        this.onlyTableData = res.data
      }
    },

上面的一些配套内容：

 data() {
    return {
     
      // 级联选择框双向绑定到的数组（他的长度可以让我们拿到三级分类的id)
      selectedCateKeys: [],
      // 被激活的页签的名称（因为点击哪个表格是不确定的，所以需要这个）
      activeName: 'many',
      // 动态参数的数据（表格一的数据）
      manyTableData: [],
      // 静态属性的数据（表格二的数据）
      onlyTableData: [],
}
},
 computed: {
   
    // 当前选中的三级分类的Id--------------------这个cateId在将新添加的内容保存到数据库，调接口删除用户，点击添加框和修改框确定按钮都要用到
    cateId() {
      if (this.selectedCateKeys.length === 3) {
        return this.selectedCateKeys[2]
      }
      return null
    },
    
  },

2.这是标签列表的html结构（elementui组件）

 <!-- 展开行 -->
            <el-table-column type="expand">
              <!-- 插槽 -->
              <template slot-scope="scope">
                <!-- 循环渲染Tag标签  closable为标签加上❌号      @close="handleClose(i, scope.row)"关闭tag标签时触发的事件 -->
                <el-tag v-for="(item, i) in scope.row.attr_vals" :key="i" closable @close="handleClose(i, scope.row)">{{ item }}</el-tag>
                <!-- 输入的文本框 -->
                <!--  @keyup.enter.native="handleInputConfirm(scope.row)" 点击回车键是触发-->
                <!-- @blur="handleInputConfirm(scope.row)"在 Input 失去焦点时触发 -->
                <el-input
                  class="input-new-tag"
                  v-if="scope.row.inputVisible"
                  v-model="scope.row.inputValue"
                  ref="saveTagInput"
                  size="small"
                  @keyup.enter.native="handleInputConfirm(scope.row)"
                  @blur="handleInputConfirm(scope.row)"
                >
                </el-input>
                <!-- 添加按钮 -->
                <el-button v-else class="button-new-tag" size="small" @click="showInput(scope.row)">+ New Tag</el-button>
              </template>
            </el-table-column>

3.标签变成文本框

 // 点击+ New Tag按钮
    showInput(row) {
      // 显示输入框
      row.inputVisible = true
      // 让文本框自动获得焦点
      // $nextTick 方法的作用，就是当页面上文本框渲染出来之后，才会去调用.focus()函数让文本框获得焦点
      this.$nextTick((_) => {
        this.$refs.saveTagInput.focus()
      })
    },

4.文本框变成标签

 // 文本框失去焦点，或摁下了 Enter 都会触发
    async handleInputConfirm(row) {
      // 如果文本框里面没有内容，就重置文本框并且关闭文本框变回Tag标签
      if (row.inputValue.trim().length === 0) {
        row.inputValue = ''
        row.inputVisible = false
        return
      }
      // 如果有内容，则将内容去除空格后添加进attr_vals数组里面-------------（attr_vals数组就是标签里面的内容）
      row.attr_vals.push(row.inputValue.trim())
      // 重置文本框
      row.inputValue = ''
      // 关闭文本框变回Tag标签
      row.inputVisible = false
      // 将新添加的内容保存到数据库（只有保存进数据库才可以真正的保存进attr_vals数组）
      this.saveAttrVals(row)
    },

5.将刚才变成的标签保存进数据库，这样标签即使刷新后也能存在了

  // 将新添加的内容保存到数据库（保存完后不要刷新页面，不然会关闭展开行，导致体验不好）
    async saveAttrVals(row) {
      // 需要发起请求，保存这次操作
      const { data: res } = await this.$http.put(`categories/${this.cateId}/attributes/${row.attr_id}`, {
        attr_name: row.attr_name,
        attr_sel: row.attr_sel,
        attr_vals: row.attr_vals.join(' '), // 将数组转换为字符串（因为接口上说这个参数只要字符串）（因为我们拿过来时将这个参数转成了数组，现在我们是转回去）
      })

      if (res.meta.status !== 200) {
        return this.$message.error('修改参数项失败！')
      }

      this.$message.success('修改参数项成功！')
    },

6.点击标签的叉号删除标签（也要保存进数据库）

 // 关闭tag标签时触发的事件
    handleClose(i, row) {
      row.attr_vals.splice(i, 1) //删除attr_vals数组里面的点击关闭的这个标签
      // 刷新将新添加的内容保存到数据库这个函数
      this.saveAttrVals(row)
    },