feat: 表格支持真选中

刘汉宸
1 parent ac9edcbe
Showing 1 changed file with 39 additions and 1 deletions Show diff stats
packages/table/index.vue
@@ -5,7 +5,16 @@
 </style>
  
 <template>
-  <el-table class="eagle-table" ref="table" :data="tableData" v-bind="{ size: 'small', ...tableProps }" v-on="tableEvents" @selection-change="onSelectionChange">
+  <el-table
+    class="eagle-table"
+    ref="table"
+    :data="tableData"
+    v-bind="{ size, ...tableProps }"
+    v-on="tableEvents"
+    @select="onSelect"
+    @select-all="onSelectAll"
+    @selection-change="onSelectionChange"
+  >
     <!-- 默认表格插槽 -->
     <slot name="default"></slot>
     <!-- 根据配置列表生成表格列 -->
@@ -81,6 +90,11 @@ export default {
     tableEvents: Object,
     // 列宽
     minWidth: Number,
+    // 大小
+    size: {
+      type: String,
+      default: 'small',
+    },
   },
   data() {
     return {
@@ -152,10 +166,34 @@ export default {
       }
       return result;
     },
+    // 选中单行
+    onSelect(selection, row) {
+      if (selection.find(i => i.id === row.id)) {
+        this.$emit('selection-change', [row], 'check');
+      } else {
+        this.$emit('selection-change', [row], 'uncheck');
+      }
+    },
+    // 切换全选
+    onSelectAll(selection) {
+      if (selection && selection.length > 0) {
+        this.$emit('selection-change', selection, 'check');
+      } else {
+        this.$emit('selection-change', this.tableData, 'uncheck');
+      }
+    },
     // 表格选中
     onSelectionChange(selection) {
       this.$emit('selection', selection);
     },
+    // 切换某行选中状态
+    toggleRowSelection(row, selected) {
+      this.$refs.table && this.$refs.table.toggleRowSelection(row, selected);
+    },
+    // 清除表格选中
+    clearSelection() {
+      this.$refs.table && this.$refs.table.clearSelection();
+    },
   },
 };
 </script>
...	...	@@ -5,7 +5,16 @@
5	5	</style>
6	6
7	7	<template>
8		- <el-table class="eagle-table" ref="table" :data="tableData" v-bind="{ size: 'small', ...tableProps }" v-on="tableEvents" @selection-change="onSelectionChange">
	8	+ <el-table
	9	+ class="eagle-table"
	10	+ ref="table"
	11	+ :data="tableData"
	12	+ v-bind="{ size, ...tableProps }"
	13	+ v-on="tableEvents"
	14	+ @select="onSelect"
	15	+ @select-all="onSelectAll"
	16	+ @selection-change="onSelectionChange"
	17	+ >
9	18	<!-- 默认表格插槽 -->
10	19	<slot name="default"></slot>
11	20	<!-- 根据配置列表生成表格列 -->
...	...	@@ -81,6 +90,11 @@ export default {
81	90	tableEvents: Object,
82	91	// 列宽
83	92	minWidth: Number,
	93	+ // 大小
	94	+ size: {
	95	+ type: String,
	96	+ default: 'small',
	97	+ },
84	98	},
85	99	data() {
86	100	return {
...	...	@@ -152,10 +166,34 @@ export default {
152	166	}
153	167	return result;
154	168	},
	169	+ // 选中单行
	170	+ onSelect(selection, row) {
	171	+ if (selection.find(i => i.id === row.id)) {
	172	+ this.$emit('selection-change', [row], 'check');
	173	+ } else {
	174	+ this.$emit('selection-change', [row], 'uncheck');
	175	+ }
	176	+ },
	177	+ // 切换全选
	178	+ onSelectAll(selection) {
	179	+ if (selection && selection.length > 0) {
	180	+ this.$emit('selection-change', selection, 'check');
	181	+ } else {
	182	+ this.$emit('selection-change', this.tableData, 'uncheck');
	183	+ }
	184	+ },
155	185	// 表格选中
156	186	onSelectionChange(selection) {
157	187	this.$emit('selection', selection);
158	188	},
	189	+ // 切换某行选中状态
	190	+ toggleRowSelection(row, selected) {
	191	+ this.$refs.table && this.$refs.table.toggleRowSelection(row, selected);
	192	+ },
	193	+ // 清除表格选中
	194	+ clearSelection() {
	195	+ this.$refs.table && this.$refs.table.clearSelection();
	196	+ },
159	197	},
160	198	};
161	199	</script>
...	...