优化新式表格编辑事件

Aaron
1 parent 6ea31861
Showing 2 changed files with 73 additions and 36 deletions Show diff stats
examples/views/page/other.vue
examples/views/page/table-new/index.vue
@@ -13,8 +13,9 @@
 <template>
   <div>
     <pre>{{ tableData }}</pre>
-    <eg-table v-model="tableData" :list="option.list" :tableProps="{ border: true }" editable @cell-edit="onCellEdit">
-      <el-table-column type="selection"></el-table-column>
+    <eg-table v-model="tableData" :list="option.list" :tableProps="{ border: true }" editable
+      @cell-edit="onCellEdit" @row-new="onRowNew" @row-edit="onRowEdit" @row-delete="onRowDelete"
+    >
       <template #value-location-locationMin="{ value }">
         <el-tag v-if="value" size="mini" disable-transitions>{{ value }}</el-tag>
       </template>
@@ -161,8 +162,17 @@ export default {
     handleGetValue() {
       this.$refs.form.validate();
     },
-    onCellEdit(e) {
-      console.log(e)
+    onCellEdit(data) {
+      console.log('cell-edit', data);
+    },
+    onRowNew(data) {
+      console.log('row-new', data);
+    },
+    onRowEdit(data) {
+      console.log('row-edit', data);
+    },
+    onRowDelete(data) {
+      console.log('row-delete', data);
     }
   }
 }
@@ -7,14 +7,16 @@
 <template>
   <div @keyup.enter="tableEditCell = {}">
     <div style="padding-bottom: 10px;">
-      <el-button @click="handleNew" size="mini">新增</el-button>
+      <el-button @click="handleNew" size="mini" v-if="!rowEdit">新增</el-button>
       <el-button @click="handleEdit" size="mini" v-if="!rowEditable && tableSelection.length > 0">编辑</el-button>
       <el-button @click="handleSave" size="mini" type="primary" v-if="rowEditable">完成</el-button>
-      <el-button @click="handleCancel" size="mini" type="plain" v-if="rowNew">取消</el-button>
+      <el-button @click="handleCancel" size="mini" type="plain" v-if="rowNew && !rowEdit">取消</el-button>
+      <el-button @click="handleDelete" size="mini" type="danger" v-if="tableSelection.length > 0">删除</el-button>
     </div>
     <el-table class="eagle-table" ref="table" :data="tableData" v-bind="{ size: 'small', ...tableProps }"
       v-on="tableEvents" @cell-dblclick="onCellDblclick" @selection-change="onSelectionChange"
     >
+      <el-table-column type="selection" :selectable="r => rowNew ? r.$new : true"></el-table-column>
       <!-- 默认表格插槽 -->
       <slot name="default"></slot>
       <!-- 根据配置列表生成表格列 -->
@@ -57,6 +59,17 @@
 import { cloneDeep, get, set } from '../form-new/util';
 import CellEditable from './cell-editable';
+const listHasKey = (list, name) => {
+  let result = false;
+  for (const row of list) {
+    if (row[name]) {
+      result = true;
+      break;
+    }
+  }
+  return result;
+}
+
 export default {
   name: 'TableNew',
   components: { CellEditable },
@@ -92,37 +105,27 @@ export default {
   computed: {
     // 表格实体
     instance: {
-      get() {
-        return this.$refs.table;
-      }
+      get() { return this.$refs.table; }
     },
     // 行编辑状态
     rowEditable() {
-      let result = false;
-      for (const row of this.tableData) {
-        if (row.$editable) {
-          result = true;
-          break;
-        }
-      }
-      return result;
+      return listHasKey(this.tableData, '$editable');
     },
     // 存在新行
     rowNew() {
-      let result = false;
-      for (const row of this.tableData) {
-        if (row.$new) {
-          result = true;
-          break;
-        }
-      }
-      return result;
+      return listHasKey(this.tableData, '$new');
+    },
+    // 存在编辑行
+    rowEdit() {
+      return listHasKey(this.tableData, '$edit');
     }
   },
   watch: {
     value: {
       handler(val = []) {
-        this.tableData = val.map((o, i) => ({ ...o, $index: i }));
+        this.tableData = val.map((o, i) => {
+          return { ...o, $index: i, $editable: undefined, $new: undefined };
+        });
       },
       immediate: true
     },
@@ -171,41 +174,65 @@ export default {
   },
   methods: {
     $_get: get,
+    // 处理新增逻辑
     handleNew() {
       const tableData = cloneDeep(this.tableData);
       tableData.push({ ...this.tableRowTemplate, $new: true });
       this.tableEditCell = {};
-      this.emitTableData(tableData);
+      this.tableData = tableData.map((o, i) => ({ ...o, $index: i }));
     },
+    // 处理编辑逻辑
     handleEdit() {
       const tableData = cloneDeep(this.tableData);
       const selectionIndexArr = this.tableSelection.map(i => i.$index);
       tableData.forEach((r, i) => {
         if (selectionIndexArr.includes(r.$index)) {
           tableData[i].$editable = true;
+          tableData[i].$edit = true;
+          tableData[i].$new = true;
         }
       });
       this.tableEditCell = {};
-      this.emitTableData(tableData);
+      this.tableData = tableData.map((o, i) => ({ ...o, $index: i }));
     },
+    // 处理保存逻辑
     handleSave() {
       const tableData = cloneDeep(this.tableData);
       tableData.forEach((r, i) => {
         delete tableData[i].$editable;
-        delete tableData[i].$new;
       });
       this.tableEditCell = {};
-      this.emitTableData(tableData);
+      this.tableData = tableData.map((o, i) => ({ ...o, $index: i }));
+      this.$nextTick(() => {
+        this.emitTableData(this.tableData);
+        this.$emit(this.rowEdit ? 'row-edit' : 'row-new', this.tableData.filter(d => d.$new).map(d => {
+          delete d.$new;
+          return d;
+        }));
+      });
     },
+    // 处理取消逻辑
     handleCancel() {
       let tableData = cloneDeep(this.tableData);
       tableData = tableData.filter(row => !row.$new);
       this.emitTableData(tableData);
     },
+    // 处理删除逻辑
+    handleDelete() {
+      const tableData = cloneDeep(this.tableData);
+      const selectionIndexArr = this.tableSelection.map(i => i.$index);
+      if (!this.rowNew && !this.rowEdit) {
+        this.$emit('row-delete', this.tableSelection);
+      }
+      this.tableEditCell = {};
+      this.tableData = tableData.filter((d, i) => !selectionIndexArr.includes(i)).map((o, i) => ({ ...o, $index: i }));
+    },
     // 更新表格数据
     emitTableData(tableData) {
       if (this.$listeners['input']) {
-        this.$emit('input', tableData);
+        this.$emit('input', tableData.map((o, i) => {
+          return { ...o, $index: i, $editable: undefined, $new: undefined, $edit: undefined };
+        }));
       } else {
         this.tableData = tableData;
       }
@@ -224,7 +251,7 @@ export default {
     },
     // 双击单元格
     onCellDblclick(row, column, cell, event) {
-      if (this.editable) {
+      if (this.editable && !this.rowNew) {
         this.tableEditCell = { index: row.$index, key: column.property };
       }
     },
@@ -237,15 +264,15 @@ export default {
       this.tableEditCell = {};
       if (this.$listeners['cell-edit']) {
         const { tableData } = this.setCellValue({ value, row, key, fullKey });
-        if (this.$listeners['input']) {
-          this.$emit('input', tableData);
-        }
+        this.emitTableData(tableData);
         this.$emit('cell-edit', { row, key, fullKey, value });
       }
     },
     // 表格取消编辑
     onCellUpdateCancel({ oldValue, value, row, key, fullKey }) {
-      this.setCellValue({ value: oldValue, row, key, fullKey });
+      if (row.$new !== true) {
+        this.setCellValue({ value: oldValue, row, key, fullKey });
+      }
     },
     // 设置表格值
     setCellValue({ value, row, key, fullKey }) {