Commit 6ddd056df7183ffc6ced9a980e910416d4e237b4
1 parent
ac9edcbe
Exists in
master
and in
3 other branches
feat: 表格支持真选中
Showing
1 changed file
with
39 additions
and
1 deletions
Show diff stats
packages/table/index.vue
| @@ -5,7 +5,16 @@ | @@ -5,7 +5,16 @@ | ||
| 5 | </style> | 5 | </style> |
| 6 | 6 | ||
| 7 | <template> | 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 | <slot name="default"></slot> | 19 | <slot name="default"></slot> |
| 11 | <!-- 根据配置列表生成表格列 --> | 20 | <!-- 根据配置列表生成表格列 --> |
| @@ -81,6 +90,11 @@ export default { | @@ -81,6 +90,11 @@ export default { | ||
| 81 | tableEvents: Object, | 90 | tableEvents: Object, |
| 82 | // 列宽 | 91 | // 列宽 |
| 83 | minWidth: Number, | 92 | minWidth: Number, |
| 93 | + // 大小 | ||
| 94 | + size: { | ||
| 95 | + type: String, | ||
| 96 | + default: 'small', | ||
| 97 | + }, | ||
| 84 | }, | 98 | }, |
| 85 | data() { | 99 | data() { |
| 86 | return { | 100 | return { |
| @@ -152,10 +166,34 @@ export default { | @@ -152,10 +166,34 @@ export default { | ||
| 152 | } | 166 | } |
| 153 | return result; | 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 | onSelectionChange(selection) { | 186 | onSelectionChange(selection) { |
| 157 | this.$emit('selection', selection); | 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 | </script> | 199 | </script> |