修改多选(暂时无回显,单次使用)

components/data-table.vue

@@ -1,6 +1,17 @@
 <template>
+  <!-- TODO 多选回显显示有问题.没显示对号 row-key="id" -->
   <div id="data-table">
-    <el-table :data="data" border stripe size="small" :max-height="height !== null ? height : ''">
+    <el-table
+      ref="table"
+      :row-key="getRowKey"
+      :data="data"
+      border
+      stripe
+      size="small"
+      :max-height="height !== null ? height : ''"
+      @selection-change="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>
       </template>
@@ -37,9 +48,13 @@ export default {
     opera: { type: Array, default: () => [] },
     toFormat: null,
     height: null,
+    select: { type: Boolean, default: false },
+    selected: { type: Array, default: () => [] },
   },
   components: {},
-  data: () => ({}),
+  data: () => ({
+    pageSelected: [],
+  }),
   created() {},
   computed: {},
   methods: {
@@ -79,6 +94,22 @@ export default {
         this.$emit(method, { data, index });
       }
     },
+    handleSelectionChange(rows) {
+      console.log(rows);
+      this.pageSelected = rows;
+      this.$emit(`handleSelect`, rows);
+    },
+    getRowKey(row) {
+      return row.id;
+    },
+    setSelectTable() {
+      this.selected.forEach(val => {
+        this.$refs.table && this.$refs.table.toggleRowSelection(val, true);
+      });
+    },
+    selectReset() {
+      this.$refs.table.clearSelection();
+    },
     display(item, row) {
       let display = _.get(item, `display`, true);
       if (display === true) return true;
@@ -88,6 +119,16 @@ export default {
       }
     },
   },
+  watch: {
+    selected: {
+      handler(val) {
+        if (val.length > 0) {
+          this.setSelectTable(val);
+        }
+      },
+      immediate: true,
+    },
+  },
 };
 </script>
 

components/table.md

@@ -7,6 +7,7 @@
 |data|Array|`-`|是|数据列表|
 |opera|Array|[ ]|否|操作列的列表(下文会说明如何使用)|
 |toFormat|Function|`-`|否|如果fields中的format不是function类型,则会走toFormat的方法,需要自己写过滤规则,多个的情况需要区分|
+|select|Boolean|false|否|需要选择就变成true|
 
 >fields
 >>
@@ -26,3 +27,9 @@
 |confirm|Boolean|`-`|否|是否需要确认提示|
 |methodZh|String|label|否|确认提示的操作文字|
 |display|Function|`-`|否|控制按钮是否显示(目前为简单版,只是根据此条数据中的内容判断,以后要是有需求会修改成toFormat的形式)|
+
+>methods
+>>
+|方法名|参数|说明|
+|:-:|:-:|:-:|
+|handleSelect|Array[object]|返回选择的内容|