属性组多选及取消

src/views/product/group/index.vue

@@ -140,16 +140,18 @@
             <el-card class="box-card" >
               <div slot="header" class="clearfix">
                 <span>已选属性</span>
+                {{this.form.checkedAttributeIds}}
               </div>
-              <el-row :gutter="20" style="margin: 0 10px">
+              <el-row :gutter="20"  style="height: 100px">
+                <el-col :span="3" v-for="(attribute,index) in checkedAttribute">
                   <el-tag
-                    v-for="attribute in checkedAttribute"
-                    :key="attribute.id"
+                    style="margin: 0 10px"
+                    :key="attribute.name"
                     closable
-                    @close="handleClose(attribute)">
+                    @close="removeCheck(index)">
                     {{attribute.name}}
                   </el-tag>
-
+                </el-col>
               </el-row>
 
             </el-card>
@@ -158,18 +160,20 @@
             <div slot="header" class="clearfix">
               <span>可选属性</span>
             </div>
-            <el-checkbox-group
-              v-model="checkedAttribute">
+            <el-row>
+              <el-col :span="3" v-for="attribute in attributeList">
                 <el-checkbox
-                v-for="attribute in attributeList"
-                :value="attribute"
+                  v-model="form.checkedAttributeIds"
+                  :value="attribute.id"
                   :key="attribute.id"
-                :label="attribute"
+                  :label="attribute.id"
                   @change="handleCheckedAttributeChange(attribute)"
-              >
+                  border>
+                  {{attribute.id}}
                   {{attribute.name}}
                 </el-checkbox>
-            </el-checkbox-group>
+              </el-col>
+            </el-row>
           </el-card>
           </el-card>
         </el-row>
@@ -195,6 +199,7 @@ export default {
       inputVisible: false,
       //已选属性数组
       checkedAttribute: [],
+      //所选属性id集合
       //商品属性表
       attributeList: [],
       // 遮罩层
@@ -241,13 +246,23 @@ export default {
   methods: {
     //属性复选框选择事件
     handleCheckedAttributeChange(attribute){
-      console.log(this.checkedAttribute)
-      console.log(attribute)
+      let isChecked = this.form.checkedAttributeIds.indexOf(attribute.id) > -1;
+      if (isChecked){
+        this.checkedAttribute.push(attribute)
+      }else {
+        //删除属性
+        this.checkedAttribute.splice(
+          this.checkedAttribute.indexOf(attribute),1
+        )
+      }
 
+      // this.checkedAttribute.splice(this.checkedAttributeIds.indexOf(attribute.id),1)
     },
     //关闭标签
-    handleClose(attribute) {
-      this.checkedAttribute.splice(this.checkedAttribute.indexOf(attribute), 1);
+    removeCheck(index) {
+      console.log(index)
+      this.checkedAttribute.splice(index,1);
+      this.form.checkedAttributeIds.splice(index,1)
     },
     /** 查询属性组列表 */
     getList() {
@@ -281,9 +296,11 @@ export default {
         createBy: null,
         createTime: null,
         updateBy: null,
-        updateTime: null
+        updateTime: null,
+        checkedAttributeIds: [],
       };
       this.resetForm("form");
+      this.checkedAttribute= []
     },
     /** 搜索按钮操作 */
     handleQuery() {
@@ -310,13 +327,16 @@ export default {
     },
     /** 修改按钮操作 */
     handleUpdate(row) {
+      console.log(row)
       this.getAttribute();
       this.reset();
       const id = row.id || this.ids
       getGroup(id).then(response => {
+        console.log(response)
         this.form = response.data;
         this.open = true;
         this.title = "修改属性组";
+        this.form.checkedAttributeIds= []
       });
     },
     /** 提交按钮 */