修改表格多选

components/data-table.vue

@@ -1,7 +1,17 @@
 <template>
-  <!-- TODO 多选回显显示有问题.没显示对号 row-key="id"  @selection-change="rows => handleSelectionChange(rows, 'select')"-->
+  <!-- TODO 多选回显显示有问题.没显示对号 row-key="id"  @selection-change="rows => handleSelectionChange(rows, 'select')"  -->
   <div id="data-table">
-    <el-table ref="table" row-key="id" :data="data" border stripe size="small" :max-height="height !== null ? height : ''" @select="handleSelectionChange">
+    <el-table
+      ref="table"
+      row-key="id"
+      :data="data"
+      border
+      stripe
+      size="small"
+      :max-height="height !== null ? height : ''"
+      @select="handleSelectionChange"
+      @select-all="handleSelectAll"
+    >
       <el-table-column type="selection" width="55" v-if="select" prop="id" :reserve-selection="true"> </el-table-column>
       <template v-for="(item, index) in fields">
         <el-table-column :key="index" align="center" :label="item.label" :prop="item.prop" :formatter="toFormatter"></el-table-column>
@@ -91,15 +101,38 @@ export default {
       }
     },
     handleSelectionChange(selection, row) {
+      // console.log(selection);
+      // console.log(row);
       //根据row是否再pageSelected中,判断是添加还是删除
       let res = [];
-      if (this.pageSelected.find(i => i.id === row.id)) res = this.pageSelected.filter(f => f.id !== row.id);
-      else {
+      if (this.pageSelected.find(i => i.id === row.id)) {
+        res = this.pageSelected.filter(f => f.id !== row.id);
+      } else {
         this.pageSelected.push(row);
         res = this.pageSelected;
       }
+      this.$set(this, `pageSelected`, res);
       this.$emit(`handleSelect`, _.uniqBy(res, 'id'));
     },
+    handleSelectAll(selection) {
+      //处于没全选状态,选择之后一定是全选,只有处于全选状态时,才会反选(全取消)
+      // console.log(selection);
+      let res = [];
+      if (selection.length > 0) {
+        //全选
+        res = _.uniqBy(this.pageSelected.concat(selection), 'id');
+      } else {
+        //全取消
+        res = _.differenceBy(this.pageSelected, this.data, 'id');
+      }
+      this.$set(this, `pageSelected`, res);
+      this.$emit(`handleSelect`, res);
+
+      // let res = [];
+      // this.pageSelected.concat(selection);
+      // res = this.pageSelected;
+      // this.$emit('handleSelect', _.uniqBy(res, `id`));
+    },
     initSelection() {
       this.$nextTick(() => {
         this.$refs.table.clearSelection();