Commit 6ea3186144ed917ebcc8c8de7de18d8830d8cb8c
1 parent
b8413d19
Exists in
master
and in
1 other branch
优化可编辑单元格事件推送
Showing
3 changed files
with
53 additions
and
24 deletions
Show diff stats
examples/views/page/other.vue
| @@ -12,7 +12,7 @@ | @@ -12,7 +12,7 @@ | ||
| 12 | 12 | ||
| 13 | <template> | 13 | <template> |
| 14 | <div> | 14 | <div> |
| 15 | - <pre>{{ model }}</pre> | 15 | + <pre>{{ tableData }}</pre> |
| 16 | <eg-table v-model="tableData" :list="option.list" :tableProps="{ border: true }" editable @cell-edit="onCellEdit"> | 16 | <eg-table v-model="tableData" :list="option.list" :tableProps="{ border: true }" editable @cell-edit="onCellEdit"> |
| 17 | <el-table-column type="selection"></el-table-column> | 17 | <el-table-column type="selection"></el-table-column> |
| 18 | <template #value-location-locationMin="{ value }"> | 18 | <template #value-location-locationMin="{ value }"> |
examples/views/page/table-new/cell-editable.vue
| @@ -18,9 +18,9 @@ | @@ -18,9 +18,9 @@ | ||
| 18 | <component | 18 | <component |
| 19 | :value="$_get(row, item.fullKey)" | 19 | :value="$_get(row, item.fullKey)" |
| 20 | :is="item.type" v-bind="item.props" :style="item.style" size="mini" | 20 | :is="item.type" v-bind="item.props" :style="item.style" size="mini" |
| 21 | - @input="v => $emit('update', { oldValue, value: v, row, key: item.key, fullKey: item.fullKey })" | 21 | + @input="onInput" |
| 22 | ></component> | 22 | ></component> |
| 23 | - <span v-if="btnVisible !== false" @click="$emit('done')"> | 23 | + <span v-if="btnVisible !== false" @click="onConfirm"> |
| 24 | <svg class="eagle-table-cell-editable__icon" viewBox="0 0 1024 1024" width="24" height="24"> | 24 | <svg class="eagle-table-cell-editable__icon" viewBox="0 0 1024 1024" width="24" height="24"> |
| 25 | <path d="M235.946667 472.938667l-45.226667 45.312 210.090667 209.514666 432.362666-427.690666-45.013333-45.482667-387.157333 382.976z"></path> | 25 | <path d="M235.946667 472.938667l-45.226667 45.312 210.090667 209.514666 432.362666-427.690666-45.013333-45.482667-387.157333 382.976z"></path> |
| 26 | </svg> | 26 | </svg> |
| @@ -51,20 +51,42 @@ export default { | @@ -51,20 +51,42 @@ export default { | ||
| 51 | editable: Boolean, | 51 | editable: Boolean, |
| 52 | btnVisible: Boolean, | 52 | btnVisible: Boolean, |
| 53 | }, | 53 | }, |
| 54 | - methods: { | ||
| 55 | - $_get: get, | ||
| 56 | - }, | ||
| 57 | data() { | 54 | data() { |
| 58 | return { | 55 | return { |
| 59 | oldValue: undefined, | 56 | oldValue: undefined, |
| 57 | + value: undefined, | ||
| 58 | + confirm: false, | ||
| 60 | } | 59 | } |
| 61 | }, | 60 | }, |
| 62 | watch: { | 61 | watch: { |
| 63 | - editable: { | ||
| 64 | - handler() { | 62 | + editable(val) { |
| 63 | + if (val) { | ||
| 64 | + this.confirm = false; | ||
| 65 | this.oldValue = get(this.row, this.item.agentKey || this.item.fullKey); | 65 | this.oldValue = get(this.row, this.item.agentKey || this.item.fullKey); |
| 66 | - }, | ||
| 67 | - immediate: true, | 66 | + } else { |
| 67 | + if (!this.confirm) { | ||
| 68 | + this.$emit('cancel', this.emitData); | ||
| 69 | + } | ||
| 70 | + } | ||
| 71 | + } | ||
| 72 | + }, | ||
| 73 | + computed: { | ||
| 74 | + emitData() { | ||
| 75 | + const { oldValue, value, row, item } = this; | ||
| 76 | + return { oldValue, value, row, key: item.key, fullKey: item.fullKey }; | ||
| 77 | + } | ||
| 78 | + }, | ||
| 79 | + methods: { | ||
| 80 | + $_get: get, | ||
| 81 | + // 组件出发input事件 | ||
| 82 | + onInput(value) { | ||
| 83 | + this.value = value; | ||
| 84 | + this.$emit('update', this.emitData) | ||
| 85 | + }, | ||
| 86 | + // 当点击确认 | ||
| 87 | + onConfirm() { | ||
| 88 | + this.confirm = true; | ||
| 89 | + this.$emit('done', this.emitData); | ||
| 68 | } | 90 | } |
| 69 | } | 91 | } |
| 70 | } | 92 | } |
examples/views/page/table-new/index.vue
| @@ -28,7 +28,7 @@ | @@ -28,7 +28,7 @@ | ||
| 28 | <template #default="{ row, column, $index }"> | 28 | <template #default="{ row, column, $index }"> |
| 29 | <cell-editable | 29 | <cell-editable |
| 30 | :editable="row.$editable || (editable && (tableEditCell.index === row.$index && tableEditCell.key === (item.agentKey || item.fullKey || item.key)))" | 30 | :editable="row.$editable || (editable && (tableEditCell.index === row.$index && tableEditCell.key === (item.agentKey || item.fullKey || item.key)))" |
| 31 | - :row="row" :item="item" @update="onCellUpdate" @done="onCellUpdateDone" :btn-visible="!row.$editable" | 31 | + :row="row" :item="item" @update="onCellUpdate" @done="onCellUpdateDone" @cancel="onCellUpdateCancel" :btn-visible="!row.$editable" |
| 32 | > | 32 | > |
| 33 | <!-- 如果有表格列值渲染具名插槽 --> | 33 | <!-- 如果有表格列值渲染具名插槽 --> |
| 34 | <slot v-if="$scopedSlots[`value-${item.keyPath.join('-')}`]" :name="`value-${item.keyPath.join('-')}`" v-bind="item" | 34 | <slot v-if="$scopedSlots[`value-${item.keyPath.join('-')}`]" :name="`value-${item.keyPath.join('-')}`" v-bind="item" |
| @@ -230,24 +230,31 @@ export default { | @@ -230,24 +230,31 @@ export default { | ||
| 230 | }, | 230 | }, |
| 231 | // 编辑表格更新值 | 231 | // 编辑表格更新值 |
| 232 | onCellUpdate({ oldValue, value, row, key, fullKey }) { | 232 | onCellUpdate({ oldValue, value, row, key, fullKey }) { |
| 233 | - const tableData = cloneDeep(this.tableData); | ||
| 234 | - const tableRow = tableData[row.$index]; | ||
| 235 | - set(tableRow, fullKey, value); | ||
| 236 | - tableData[row.$index] = tableRow; | ||
| 237 | - if (this.$listeners['input']) { | 233 | + this.setCellValue({ value, row, key, fullKey }); |
| 234 | + }, | ||
| 235 | + // 编辑表格确认 | ||
| 236 | + onCellUpdateDone({ oldValue, value, row, key, fullKey }) { | ||
| 237 | + this.tableEditCell = {}; | ||
| 238 | + if (this.$listeners['cell-edit']) { | ||
| 239 | + const { tableData } = this.setCellValue({ value, row, key, fullKey }); | ||
| 238 | if (this.$listeners['input']) { | 240 | if (this.$listeners['input']) { |
| 239 | - this.$set(this.tableData, row.$index, tableRow); | ||
| 240 | - this.$emit('cell-edit', { row: tableRow, key, fullKey, oldValue, value }); | ||
| 241 | - } else { | ||
| 242 | this.$emit('input', tableData); | 241 | this.$emit('input', tableData); |
| 243 | } | 242 | } |
| 244 | - } else { | ||
| 245 | - this.$set(this.tableData, row.$index, tableRow); | 243 | + this.$emit('cell-edit', { row, key, fullKey, value }); |
| 246 | } | 244 | } |
| 247 | }, | 245 | }, |
| 248 | - // 编辑表格确认 | ||
| 249 | - onCellUpdateDone() { | ||
| 250 | - this.tableEditCell = {} | 246 | + // 表格取消编辑 |
| 247 | + onCellUpdateCancel({ oldValue, value, row, key, fullKey }) { | ||
| 248 | + this.setCellValue({ value: oldValue, row, key, fullKey }); | ||
| 249 | + }, | ||
| 250 | + // 设置表格值 | ||
| 251 | + setCellValue({ value, row, key, fullKey }) { | ||
| 252 | + const tableData = cloneDeep(this.tableData); | ||
| 253 | + const tableRow = tableData[row.$index]; | ||
| 254 | + set(tableRow, fullKey, value); | ||
| 255 | + tableData[row.$index] = tableRow; | ||
| 256 | + this.$set(this.tableData, row.$index, tableRow); | ||
| 257 | + return { tableData, tableRow }; | ||
| 251 | }, | 258 | }, |
| 252 | // 表格选中 | 259 | // 表格选中 |
| 253 | onSelectionChange(selection) { | 260 | onSelectionChange(selection) { |