feat: 优化Table组件

刘汉宸
1 parent 2c334740
Showing 4 changed files with 64 additions and 57 deletions Show diff stats
examples/views/docs/component/table.md
packages/table/editable.vue
packages/table/index.js
packages/table/normal.vue
@@ -6,7 +6,7 @@
 基本参数与ElementUI的`el-table`相同。
-::: snippet 支持`size`继承
+::: snippet 支持来自表单的`size`继承
 ```html
 <template>
@@ -44,23 +44,14 @@ export default {
 ```html
 <template>
-  <el-form size="mini">
-    <el-row>
-      <el-col :span="18">
-        <z-table v-model="tableData" type="editable" border :columns="columns">
-          <template #column-editor-gender="{ value, onInput }">
-            <el-radio-group size="mini" :value="value" @input="onInput">
-              <el-radio-button label="男">男</el-radio-button>
-              <el-radio-button label="女">女</el-radio-button>
-            </el-radio-group>
-          </template>
-        </z-table>
-      </el-col>
-      <el-col :span="6" style="padding-left: 10px">
-        <pre class="demo-model">{{ tableData }}</pre>
-      </el-col>
-    </el-row>
-  </el-form>
+  <z-table v-model="tableData" type="editable" border :columns="columns">
+    <template #editor-gender="{ value, onInput }">
+      <el-radio-group size="mini" :value="value" @input="onInput">
+        <el-radio-button label="男">男</el-radio-button>
+        <el-radio-button label="女">女</el-radio-button>
+      </el-radio-group>
+    </template>
+  </z-table>
 </template>
 <script>
@@ -68,14 +59,15 @@ export default {
   data() {
     return {
       tableData: [
-        { name: '张三', age: 31, gender: '男' },
-        { name: '李四', age: 27, gender: '女' },
-        { name: '王五', age: 16, gender: '男' },
+        { name: '张三', age: 31, gender: '男', remark: '' },
+        { name: '李四', age: 27, gender: '女', remark: '' },
+        { name: '王五', age: 16, gender: '男', remark: '' },
       ],
       columns: [
         { prop: 'name', label: '姓名', editable: false },
         { type: 'el-input-number', prop: 'age', label: '年龄' },
         { prop: 'gender', label: '性别' },
+        { prop: 'remark', label: '备注' },
       ]
     };
   },
@@ -83,4 +75,15 @@ export default {
 </script>
 ```
-:::
 \ No newline at end of file
+:::
+
+## API
+
+## Attribute 属性
+
+参数|说明|类型|可选值|默认值
+-|-|-|-|-
+data | 表格数据 | Array | - | -
+value | 表格数据（支持v-model） | Array | - | []
+columns | 表格列配置 | Array | - | []
+type | 表格类型 | String | normal、editable | normal
 \ No newline at end of file
@@ -30,23 +30,21 @@
   <el-table :data="tableData | tableDataFilter" :size="tableSize" v-bind="_props" @header-click="onHeaderClick" @cell-click="onCellClick" @cell-dblclick="onCellDblclick">
     <template v-for="(item, index) in columns">
       <el-table-column v-bind="item" :key="index">
-        <template #header>
-          <span>{{ item.label }}</span>
-        </template>
+        <slot :name="`header-${item.prop}`" slot="header"></slot>
         <template #default="{ row, column }">
-          <table-column-cell
-            :disabled="item.editable === false"
+          <cell-editor
+            :disabled="disabled || item.editable === false"
             :editable="item.editable !== false && (row.$editable || (tableEditCell.index === row.$index && tableEditCell.prop === item.prop))"
             :type="item.type"
             :value="row[column.property]"
             @input="onCellInput"
-            @edit-click="onCellDblclick(row, column)"
-            @edit-confirm="onHeaderClick"
+            @edit-click="setEditCell(row, column)"
+            @edit-confirm="cancelEditCell"
           >
-            <template v-if="$scopedSlots[`column-editor-${item.prop}`]">
-              <slot :name="`column-editor-${item.prop}`" :value="row[column.property]" :onInput="onCellInput"></slot>
+            <template v-if="$scopedSlots[`editor-${item.prop}`]">
+              <slot :name="`editor-${item.prop}`" :value="row[column.property]" :onInput="onCellInput"></slot>
             </template>
-          </table-column-cell>
+          </cell-editor>
         </template>
       </el-table-column>
     </template>
@@ -62,16 +60,12 @@ export default {
   name: 'TableEditable',
   extends: TableNormal,
   components: {
-    tableColumnCell: {
+    cellEditor: {
       props: {
         value: [String, Number, Array, Object],
         type: { type: String, default: 'el-input' },
         editable: Boolean,
         disabled: Boolean,
-        showHandler: {
-          type: Boolean,
-          default: true,
-        },
       },
       watch: {
         editable(val) {
@@ -84,7 +78,7 @@ export default {
       },
       render(h) {
         if (this.editable) {
-          let editRender = [
+          let editorRender = [
             h(this.type, {
               props: { value: this.value, size: 'mini' },
               on: {
@@ -95,21 +89,21 @@ export default {
             }),
           ];
           if (this.$scopedSlots.default) {
-            editRender = [this.$scopedSlots.default()];
+            editorRender = [this.$scopedSlots.default()];
           }
-          if (this.showHandler !== false) {
+          if (!this.disabled) {
             const handlerItems = [h('i', { attrs: { title: '确定', class: 'el-icon-check' }, on: { click: () => this.$emit('edit-confirm') } })];
             // handlerItems.push(h('i', { attrs: { title: '取消', class: 'el-icon-close' }, on: { click: () => this.$emit('edit-confirm') } }));
             const handler = h('span', handlerItems);
-            editRender.push(handler);
+            editorRender.push(handler);
           }
-          return h('span', { class: 'z-table-column__cell-editable' }, editRender);
+          return h('span', { class: 'z-table-column__cell-editable' }, editorRender);
         }
-        const defauleRender = [this.value];
-        if (!this.disabled && this.showHandler !== false) {
-          defauleRender.push(h('i', { attrs: { title: '编辑', class: 'el-icon-edit' }, on: { click: () => this.$emit('edit-click') } }));
+        const valueRender = [h('span', this.value)];
+        if (!this.disabled) {
+          valueRender.push(h('i', { attrs: { title: '编辑', class: 'el-icon-edit' }, on: { click: () => this.$emit('edit-click') } }));
         }
-        return h('span', { class: 'z-table-column__cell-editable' }, defauleRender);
+        return h('span', { class: 'z-table-column__cell-editable' }, valueRender);
       },
     },
   },
@@ -126,6 +120,8 @@ export default {
         return [];
       },
     },
+    clickable: Boolean,
+    disabled: Boolean,
     ...tableProps,
   },
   watch: {
@@ -146,21 +142,30 @@ export default {
       return value.map((item, index) => ({ ...item, $index: index }));
     },
   },
-  // mounted() {
-  //   console.log(this.$scopedSlots);
-  // },
   methods: {
     onHeaderClick() {
-      this.tableEditCell = {};
+      if (this.clickable) {
+        this.cancelEditCell();
+      }
     },
-    onCellClick(row, column, cell, event) {
-      if (row.$index !== this.tableEditCell.index || column.property !== this.tableEditCell.prop) {
-        this.tableEditCell = {};
+    onCellClick(row, column) {
+      if (this.clickable) {
+        if (row.$index !== this.tableEditCell.index || column.property !== this.tableEditCell.prop) {
+          this.tableEditCell = {};
+        }
       }
     },
-    onCellDblclick(row, column, cell, event) {
+    onCellDblclick(row, column) {
+      if (this.clickable) {
+        this.setEditCell(row, column);
+      }
+    },
+    setEditCell(row, column) {
       this.tableEditCell = { index: row.$index, prop: column.property };
     },
+    cancelEditCell() {
+      this.tableEditCell = {};
+    },
     onCellInput(value) {
       const tableData = cloneDeep(this.tableData);
       const tableRow = tableData[this.tableEditCell.index];
@@ -19,6 +19,8 @@ export default {
         return [];
       },
     },
+    clickable: Boolean,
+    disabled: Boolean,
     ...tableProps,
   },
   render(h) {
@@ -29,8 +29,5 @@ export default {
       return this.size || this._elFormItemSize || (this.elForm || {}).size || (this.$ELEMENT || {}).size;
     },
   },
-  mounted() {
-    // console.log(this);
-  },
 };
 </script>