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 | 12 | |
| 13 | 13 | <template> |
| 14 | 14 | <div> |
| 15 | - <pre>{{ model }}</pre> | |
| 15 | + <pre>{{ tableData }}</pre> | |
| 16 | 16 | <eg-table v-model="tableData" :list="option.list" :tableProps="{ border: true }" editable @cell-edit="onCellEdit"> |
| 17 | 17 | <el-table-column type="selection"></el-table-column> |
| 18 | 18 | <template #value-location-locationMin="{ value }"> | ... | ... |
examples/views/page/table-new/cell-editable.vue
| ... | ... | @@ -18,9 +18,9 @@ |
| 18 | 18 | <component |
| 19 | 19 | :value="$_get(row, item.fullKey)" |
| 20 | 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 | 22 | ></component> |
| 23 | - <span v-if="btnVisible !== false" @click="$emit('done')"> | |
| 23 | + <span v-if="btnVisible !== false" @click="onConfirm"> | |
| 24 | 24 | <svg class="eagle-table-cell-editable__icon" viewBox="0 0 1024 1024" width="24" height="24"> |
| 25 | 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 | 26 | </svg> |
| ... | ... | @@ -51,20 +51,42 @@ export default { |
| 51 | 51 | editable: Boolean, |
| 52 | 52 | btnVisible: Boolean, |
| 53 | 53 | }, |
| 54 | - methods: { | |
| 55 | - $_get: get, | |
| 56 | - }, | |
| 57 | 54 | data() { |
| 58 | 55 | return { |
| 59 | 56 | oldValue: undefined, |
| 57 | + value: undefined, | |
| 58 | + confirm: false, | |
| 60 | 59 | } |
| 61 | 60 | }, |
| 62 | 61 | watch: { |
| 63 | - editable: { | |
| 64 | - handler() { | |
| 62 | + editable(val) { | |
| 63 | + if (val) { | |
| 64 | + this.confirm = false; | |
| 65 | 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 | 28 | <template #default="{ row, column, $index }"> |
| 29 | 29 | <cell-editable |
| 30 | 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 | 34 | <slot v-if="$scopedSlots[`value-${item.keyPath.join('-')}`]" :name="`value-${item.keyPath.join('-')}`" v-bind="item" |
| ... | ... | @@ -230,24 +230,31 @@ export default { |
| 230 | 230 | }, |
| 231 | 231 | // 编辑表格更新值 |
| 232 | 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 | 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 | 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 | 260 | onSelectionChange(selection) { | ... | ... |