多选可以正常使用

components/data-table.vue

@@ -1,16 +1,7 @@
 <template>
-  <!-- TODO 多选回显显示有问题.没显示对号 row-key="id" -->
+  <!-- TODO 多选回显显示有问题.没显示对号 row-key="id"  @selection-change="rows => handleSelectionChange(rows, 'select')"-->
   <div id="data-table">
-    <el-table
-      ref="table"
-      :row-key="getRowKey"
-      :data="data"
-      border
-      stripe
-      size="small"
-      :max-height="height !== null ? height : ''"
-      @selection-change="handleSelectionChange"
-    >
+    <el-table ref="table" row-key="id" :data="data" border stripe size="small" :max-height="height !== null ? height : ''" @select="handleSelectionChange">
       <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>
@@ -54,6 +45,7 @@ export default {
   components: {},
   data: () => ({
     pageSelected: [],
+    selectFirst: true,
   }),
   created() {},
   computed: {},
@@ -94,17 +86,23 @@ export default {
         this.$emit(method, { data, index });
       }
     },
-    handleSelectionChange(rows) {
-      console.log(rows);
-      this.pageSelected = rows;
-      this.$emit(`handleSelect`, rows);
-    },
-    getRowKey(row) {
-      return row.id;
+    handleSelectionChange(selection, row) {
+      //根据row是否再pageSelected中,判断是添加还是删除
+      let res = [];
+      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.$emit(`handleSelect`, _.uniqBy(res, 'id'));
     },
-    setSelectTable() {
-      this.selected.forEach(val => {
-        this.$refs.table && this.$refs.table.toggleRowSelection(val, true);
+    initSelection() {
+      this.$nextTick(() => {
+        this.$refs.table.clearSelection();
+        this.selected.forEach(info => {
+          let d = this.data.filter(p => p.id === info.id);
+          if (d.length > 0) this.$refs.table.toggleRowSelection(d[0]);
+        });
       });
     },
     selectReset() {
@@ -123,11 +121,19 @@ export default {
     selected: {
       handler(val) {
         if (val.length > 0) {
-          this.setSelectTable(val);
+          this.pageSelected = val;
+          this.initSelection();
         }
       },
       immediate: true,
     },
+    data: {
+      handler(val, oval) {
+        if (this.select) {
+          this.initSelection();
+        }
+      },
+    },
   },
 };
 </script>