参数tag删除 用到动态添加tag(点击按钮变成输入框)

src/components/goods/params.vue

@@ -40,6 +40,22 @@
             <el-table-column
               type="expand"
             >
+              <template slot-scope="scope">
+                <span v-if="scope.row.attr_vals" >
+                  <el-tag  closable :key="i" v-for="(tag,i) in scope.row.attr_vals.split(' ')" @close="delTag(tag,scope.row)">{{tag}}</el-tag>
+                </span>
+                <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>
             <el-table-column
               label="#"
@@ -69,6 +85,11 @@
             <el-table-column
               type="expand"
             >
+              <template slot-scope="scope">
+                <div v-if="scope.row.attr_vals" >
+                  <el-tag  closable :key="i" v-for="(tag,i) in scope.row.attr_vals.split(' ')">{{tag}}</el-tag>
+                </div>
+              </template>
             </el-table-column>
             <el-table-column
               label="#"
@@ -142,6 +163,42 @@ export default {
     }
   },
   methods: {
+
+    delTag (tag, row) {
+      const tmp = row.attr_vals.split(' ')
+      tmp.splice(tmp.indexOf(tag), 1)
+      row.attr_vals = tmp.join(' ')
+      this.save(row)
+    },
+    showInput (row) {
+      row.inputVisible = true
+      // 当页面被重新渲染之后执行的回调函数
+      this.$nextTick(_ => {
+        this.$refs.saveTagInput.$refs.input.focus()
+      })
+    },
+
+    async save (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
+      })
+      if (res.meta.status !== 200) {
+        return this.$message.error(res.meta.msg)
+      }
+      this.$message.success(res.meta.msg)
+    },
+
+    async handleInputConfirm (row) {
+      const inputValue = row.inputValue.trim()
+      if (inputValue.length > 0) {
+        row.attr_vals += (row.attr_vals.length > 0 ? ' ' : '') + inputValue
+        await this.save(row)
+      }
+      row.inputVisible = false
+      row.inputValue = ''
+    },
     sub () {
       this.$refs.form.validate(valid => {
         if (valid) {
@@ -197,6 +254,10 @@ export default {
         if (res.meta.status !== 200) {
           return this.$message.error(res.meta.msg)
         }
+        res.data.forEach((item, i) => {
+          res.data[i].inputVisible = false
+          res.data[i].inputValue = ''
+        })
         this[this.tab] = res.data
       }
     },
@@ -232,4 +293,7 @@ export default {
 .el-alert{
   margin-bottom: 15px;
 }
+  .el-tag {
+    margin-right: 10px;
+  }
 </style>