From 98832d95e8a8b51d511ba28df8868fc7f5adae65 Mon Sep 17 00:00:00 2001
From: liuhanchen <liuhanchen@zeyihuoyun.com>
Date: Thu, 8 Jun 2023 18:55:41 +0800
Subject: [PATCH] feat: 优化表格渲染逻辑

---
 packages/index.js                |   2 +-
 packages/schema-page/index.vue   |  49 ++++++++++++++++++++++++-------------------------
 packages/schema-table/index.vue  |  51 ++++++++++++++-------------------------------------
 packages/table copy/editable.vue | 217 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 packages/table copy/index.js     |  27 +++++++++++++++++++++++++++
 packages/table copy/normal.vue   |  95 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 packages/table copy/props.js     |  62 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 packages/table/editable copy.vue | 217 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 packages/table/index.js          |  27 ---------------------------
 packages/table/index.vue         |  15 +++++++++++++++
 packages/table/normal copy.vue   |  95 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 packages/table/normal.vue        | 152 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++---------------------------------------------------------------------------------------
 packages/table/props.js          |   1 +
 packages/utils/vnode.js          |  25 +++++++++++++++++++++++++
 14 files changed, 858 insertions(+), 177 deletions(-)
 create mode 100644 packages/table copy/editable.vue
 create mode 100644 packages/table copy/index.js
 create mode 100644 packages/table copy/normal.vue
 create mode 100644 packages/table copy/props.js
 create mode 100644 packages/table/editable copy.vue
 delete mode 100644 packages/table/index.js
 create mode 100644 packages/table/index.vue
 create mode 100644 packages/table/normal copy.vue
 create mode 100644 packages/utils/vnode.js

diff --git a/packages/index.js b/packages/index.js
index 5b4d48a..4b1e71f 100644
--- a/packages/index.js
+++ b/packages/index.js
@@ -1,5 +1,5 @@
 import Vue from 'vue';
-import ZTable from './table/index';
+import ZTable from './table/index.vue';
 import ZTableNormal from './table/normal';
 import ZTableEditable from './table/editable';
 import ElImageViewer from './upload/image-viewer';
diff --git a/packages/schema-page/index.vue b/packages/schema-page/index.vue
index 312bce5..0a8a80c 100644
--- a/packages/schema-page/index.vue
+++ b/packages/schema-page/index.vue
@@ -36,36 +36,35 @@
       </slot>
     </div>
     <!-- 表格内容 -->
-    <div v-if="schema.table || $scopedSlots.table" class="z-schema-page__table">
+    <div v-if="schema.table || $scopedSlots.table" class="z-schema-page__table" v-loading="schema.loading !== false ? tableLoading : false">
       <slot name="table" v-bind="_slotScope">
-        <z-schema-table
-          :size="_size"
-          :schema="tableSchemaDefaultProps(schema.table)"
-          v-model="tableData"
-          v-loading="schema.loading !== false ? tableLoading : false"
-          @selection-change="onTableSelectionChange"
-        >
-          <template #left>
-            <el-table-column v-if="schema.selection !== false" type="selection" width="40" align="center"></el-table-column>
+        <z-schema-table :size="_size" :schema="tableSchemaDefaultProps(schema.table)" :data="tableData" @selection-change="onTableSelectionChange">
+          <template #prepend>
+            <slot name="table-prepend">
+              <el-table-column v-if="schema.selection !== false" type="selection" width="40" align="center"></el-table-column>
+            </slot>
           </template>
           <template v-for="item in getSlotKeys('table-')" #[item.name]="slotScope">
             <slot :name="item.slot" v-bind="{ ..._slotScope, ...slotScope }"></slot>
           </template>
-          <slot v-if="schema.operation !== false" name="operation" v-bind="_slotScope">
-            <el-table-column v-bind="{ label: '操作', width: '90', align: 'center', ...(schema.operation || {}) }">
-              <template #default="{ row, column, $index }">
-                <div class="z-schema-page__table-operation">
-                  <slot name="operation-left" v-bind="{ ..._slotScope, row, column, $index }"></slot>
-                  <slot name="operation-button" v-bind="{ ..._slotScope, row, column, $index }"></slot>
-                  <el-button type="text" icon="el-icon-edit" title="编辑" @click="openEdit(row)"></el-button>
-                  <el-popconfirm confirm-button-text="确定" cancel-button-text="取消" title="确定删除吗？" placement="top" @confirm="onDelete([row])">
-                    <el-button slot="reference" type="text" icon="el-icon-delete" title="删除"></el-button>
-                  </el-popconfirm>
-                  <slot name="operation-right" v-bind="{ ..._slotScope, row, column, $index }"></slot>
-                </div>
-              </template>
-            </el-table-column>
-          </slot>
+          <template #append>
+            <slot name="table-append" />
+            <slot v-if="schema.operation !== false" name="operation" v-bind="_slotScope">
+              <el-table-column v-bind="{ label: '操作', width: '90', align: 'center', ...(schema.operation || {}) }">
+                <template #default="{ row, column, $index }">
+                  <div class="z-schema-page__table-operation">
+                    <slot name="operation-left" v-bind="{ ..._slotScope, row, column, $index }"></slot>
+                    <slot name="operation-button" v-bind="{ ..._slotScope, row, column, $index }"></slot>
+                    <el-button type="text" icon="el-icon-edit" title="编辑" @click="openEdit(row)"></el-button>
+                    <el-popconfirm confirm-button-text="确定" cancel-button-text="取消" title="确定删除吗？" placement="top" @confirm="onDelete([row])">
+                      <el-button slot="reference" type="text" icon="el-icon-delete" title="删除"></el-button>
+                    </el-popconfirm>
+                    <slot name="operation-right" v-bind="{ ..._slotScope, row, column, $index }"></slot>
+                  </div>
+                </template>
+              </el-table-column>
+            </slot>
+          </template>
         </z-schema-table>
       </slot>
     </div>
diff --git a/packages/schema-table/index.vue b/packages/schema-table/index.vue
index eae9c70..6767449 100644
--- a/packages/schema-table/index.vue
+++ b/packages/schema-table/index.vue
@@ -1,43 +1,20 @@
 <script>
+import { ref } from '../utils/vnode';
+
 export default {
   name: 'SchemaTable',
-  props: {
-    value: {
-      type: Array,
-      default() {
-        return [];
-      },
-    },
-    schema: {
-      required: true,
-      type: Object,
-      default() {
-        return {};
-      },
-    },
-    size: String,
-  },
-  data() {
-    return {
-      model: this.value,
-    };
-  },
-  watch: {
-    value(val = []) {
-      this.model = val;
-    },
-    model: {
-      handler(val) {
-        this.$emit('input', val);
-      },
-      deep: true,
-    },
-  },
-  render(h) {
-    const schema = this.schema || {};
-    const _props = schema.props || {};
-    const _on = schema.on || this.$listeners || {};
-    return h('z-table', { props: { value: this.model, size: this.size, columns: schema.items, ..._props }, on: _on, scopedSlots: this.$scopedSlots });
+  functional: true,
+  render(h, context) {
+    const props = context.props || {};
+    // 当前函数式组件特有props
+    const schema = props.schema;
+    // 解析schema参数，设置到即将生成的组件上下文中
+    context.props.columns = props.schema.items;
+    context.props = Object.assign(context.props, schema.props);
+    context.listeners = Object.assign(context.listeners, schema.on);
+    // 渲染组件时移除当前组件特有的props，避免透传不必要的参数
+    delete context.props.schema;
+    return ref('z-table', context);
   },
 };
 </script>
diff --git a/packages/table copy/editable.vue b/packages/table copy/editable.vue
new file mode 100644
index 0000000..99efbb6
--- /dev/null
+++ b/packages/table copy/editable.vue
@@ -0,0 +1,217 @@
+<style lang="scss">
+.z-table-column__cell-editable {
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  .el-icon-edit {
+    color: rgba(151, 151, 151, 0.5);
+    &:hover {
+      color: $primary;
+    }
+  }
+  .el-icon-check {
+    color: $green;
+  }
+  .el-icon-close {
+    color: $red;
+  }
+  .el-icon-edit,
+  .el-icon-check,
+  .el-icon-close {
+    cursor: pointer;
+    margin-left: 5px;
+    font-size: 14px;
+  }
+}
+</style>
+
+<template>
+  <el-table :data="tableData | tableDataFilter" :size="_elSize" v-bind="bindProps" v-on="$listeners" @header-click="onHeaderClick" @cell-click="onCellClick" @cell-dblclick="onCellDblclick">
+    <slot name="left"></slot>
+    <template v-for="(item, index) in columns">
+      <el-table-column v-bind="item" :key="index">
+        <slot :name="`header-${item.prop}`" slot="header"></slot>
+        <template #default="{ row, column, $index }">
+          <cell-editor
+            :disabled="item.editalways || editall || disabled || item.editable === false"
+            :editable="item.editalways || editall || (item.editable !== false && row.$editor && row.$editor.includes(item.prop))"
+            :component="item.component"
+            :value="row[column.property]"
+            @input="value => onCellInput(value, row, column, $index)"
+            @edit-click="setRowEditor(row, column, $index)"
+            @edit-confirm="value => onEditConfirm(value, row, column, $index)"
+          >
+            <template v-if="$scopedSlots[`editor-${item.prop}`]" slot="editor">
+              <slot :name="`editor-${item.prop}`" :value="row[column.property]" :row="row" :index="$index" :onInput="value => onCellInput(value, row, column, $index)"></slot>
+            </template>
+            <template v-if="$scopedSlots[`cell-${item.prop}`]">
+              <slot :name="`cell-${item.prop}`" :value="row[column.property]" :row="row" :index="$index"></slot>
+            </template>
+            <template v-else-if="item.render && typeof item.render === 'function'" #default="{ row, column, $index }">
+              <cell-render :item="item" :value="get(row, item.prop)" :row="row" :column="column" :index="$index"></cell-render>
+            </template>
+          </cell-editor>
+        </template>
+      </el-table-column>
+    </template>
+    <slot></slot>
+    <slot name="append"></slot>
+  </el-table>
+</template>
+
+<script>
+import TableNormal from './normal';
+import tableProps from './props';
+import { cloneDeep, get, set } from '../utils';
+
+export default {
+  name: 'TableEditable',
+  extends: TableNormal,
+  components: {
+    cellEditor: {
+      props: {
+        value: [String, Number, Array, Object, Boolean],
+        component: { type: String, default: 'el-input' },
+        editable: Boolean,
+        disabled: Boolean,
+      },
+      watch: {
+        editable(val) {
+          if (!this.disabled && val && this.component === 'el-input') {
+            this.$nextTick(() => {
+              this.$children[0] && this.$children[0].focus && this.$children[0].focus();
+            });
+          }
+        },
+      },
+      render(h) {
+        if (this.editable) {
+          let editorRender = [
+            h(this.component, {
+              props: { value: this.value, size: 'mini' },
+              on: {
+                input: value => {
+                  this.$emit('input', value);
+                },
+              },
+            }),
+          ];
+          if (this.$scopedSlots.editor) {
+            editorRender = [this.$scopedSlots.editor()];
+          }
+          if (!this.disabled) {
+            const handlerItems = [h('i', { attrs: { title: '确定', class: 'el-icon-check' }, on: { click: () => this.$emit('edit-confirm', this.value) } })];
+            // handlerItems.push(h('i', { attrs: { title: '取消', class: 'el-icon-close' }, on: { click: () => this.$emit('edit-confirm') } }));
+            const handler = h('span', handlerItems);
+            editorRender.push(handler);
+          }
+          return h('span', { class: 'z-table-column__cell-editable' }, editorRender);
+        }
+        let valueRender = [h('span', this.value)];
+        if (this.$scopedSlots.default) {
+          valueRender = [this.$scopedSlots.default()];
+        }
+        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' }, valueRender);
+      },
+    },
+  },
+  props: {
+    value: {
+      type: Array,
+      default() {
+        return [];
+      },
+    },
+    columns: {
+      type: Array,
+      default() {
+        return [];
+      },
+    },
+    editall: Boolean,
+    clickable: Boolean,
+    disabled: Boolean,
+    ...tableProps,
+  },
+  watch: {
+    value(val) {
+      this.tableData = val || [];
+    },
+    data(val) {
+      this.tableData = val || [];
+    },
+    tableData(val) {
+      this.$emit('input', val || []);
+    },
+  },
+  data() {
+    return {
+      tableData: this.value,
+    };
+  },
+  filters: {
+    tableDataFilter(value) {
+      return value.map((item, index) => ({ ...item, $index: index }));
+    },
+  },
+  methods: {
+    onHeaderClick() {
+      if (this.clickable) {
+        this.cancelEditCell();
+      }
+    },
+    onCellClick(row, column) {
+      if (this.clickable) {
+        const prop = column.property;
+        let tableData = cloneDeep(this.tableData);
+        tableData.forEach((item, index) => {
+          if (!(index === row.$index && item.$editor && item.$editor.includes(prop))) {
+            item.$editor = [];
+          }
+        });
+        this.tableData = tableData;
+      }
+    },
+    onCellDblclick(row, column) {
+      if (this.clickable) {
+        this.setRowEditor(row, column, row.$index);
+      }
+    },
+    setRowEditor(row, column, index) {
+      this.cancelEditCell();
+      let tableRow = this.tableData[index];
+      if (tableRow) {
+        if (tableRow.$editor) {
+          tableRow.$editor = [...tableRow.$editor, column.property];
+        } else {
+          tableRow.$editor = [column.property];
+        }
+        this.$set(this.tableData, index, tableRow);
+      }
+    },
+    onEditConfirm(value, row, column, index) {
+      this.$emit('cell-edit-confirm', { row, index, prop: column.property, value });
+      this.cancelEditCell();
+    },
+    cancelEditCell() {
+      this.tableData = this.tableData.map((item, index) => {
+        const newItem = cloneDeep(item);
+        delete newItem.$index;
+        delete newItem.$editor;
+        return newItem;
+      });
+    },
+    onCellInput(value, row, column, index) {
+      const tableData = cloneDeep(this.tableData);
+      const tableRow = tableData[index];
+      set(tableRow, column.property, value);
+      tableData[index] = tableRow;
+      this.$set(this.tableData, index, tableRow);
+    },
+  },
+};
+</script>
diff --git a/packages/table copy/index.js b/packages/table copy/index.js
new file mode 100644
index 0000000..a6b2a96
--- /dev/null
+++ b/packages/table copy/index.js
@@ -0,0 +1,27 @@
+import tableProps from './props';
+
+export default {
+  name: 'Table',
+  props: {
+    value: {
+      type: Array,
+      default() {
+        return [];
+      },
+    },
+    columns: {
+      type: Array,
+      default() {
+        return [];
+      },
+    },
+    editable: Boolean,
+    editall: Boolean,
+    clickable: Boolean,
+    disabled: Boolean,
+    ...tableProps,
+  },
+  render(h) {
+    return h(`z-table-${this.editable ? 'editable' : 'normal'}`, { props: { ...this._props }, scopedSlots: this.$scopedSlots, on: this.$listeners });
+  },
+};
diff --git a/packages/table copy/normal.vue b/packages/table copy/normal.vue
new file mode 100644
index 0000000..8a93543
--- /dev/null
+++ b/packages/table copy/normal.vue
@@ -0,0 +1,95 @@
+<template>
+  <el-table :data="tableData" :size="_elSize" v-bind="bindProps" v-on="$listeners">
+    <slot name="left"></slot>
+    <template v-for="(item, index) in columns">
+      <el-table-column v-bind="item" :key="index">
+        <slot :name="`header-${item.prop}`" slot="header"></slot>
+        <template v-if="$scopedSlots[`cell-${item.prop}`]" #default="{ row, column, $index }">
+          <slot :name="`cell-${item.prop}`" :value="get(row, item.prop)" :row="row" :column="column" :index="$index"></slot>
+        </template>
+        <template v-else-if="item.render && typeof item.render === 'function'" #default="{ row, column, $index }">
+          <cell-render :item="item" :value="get(row, item.prop)" :row="row" :column="column" :index="$index"></cell-render>
+        </template>
+      </el-table-column>
+    </template>
+    <slot></slot>
+    <slot name="append"></slot>
+  </el-table>
+</template>
+
+<script>
+import tableProps from './props';
+import { get } from '../utils';
+
+export default {
+  name: 'TableNormal',
+  components: {
+    CellRender: {
+      functional: true,
+      render(h, context) {
+        const props = context.props;
+        const item = props.item || {};
+        const content = item.render(props.value, props.row, h, props.index);
+        return typeof content === 'string' ? h('span', {}, [content]) : content;
+      },
+    },
+  },
+  inject: {
+    elForm: {
+      default: '',
+    },
+    elFormItem: {
+      default: '',
+    },
+  },
+  props: {
+    value: {
+      type: Array,
+      default() {
+        return [];
+      },
+    },
+    columns: {
+      type: Array,
+      default() {
+        return [];
+      },
+    },
+    ...tableProps,
+  },
+  data() {
+    return {
+      tableData: this.value.length > 0 ? this.value : this.data,
+    };
+  },
+  watch: {
+    value(val) {
+      this.tableData = val || [];
+    },
+    data(val) {
+      this.tableData = val || [];
+    },
+  },
+  computed: {
+    _elFormItemSize() {
+      return (this.elFormItem || {}).elFormItemSize;
+    },
+    _elSize() {
+      return this.size || this._elFormItemSize || (this.elForm || {}).size || (this.$ELEMENT || {}).size;
+    },
+    bindProps() {
+      const tablePropsKeys = Object.keys(tableProps);
+      let props = {};
+      Object.keys(this._props).forEach(key => {
+        if (tablePropsKeys.includes(key)) {
+          props[key] = this._props[key];
+        }
+      });
+      return props;
+    },
+  },
+  methods: {
+    get,
+  },
+};
+</script>
diff --git a/packages/table copy/props.js b/packages/table copy/props.js
new file mode 100644
index 0000000..7ea8926
--- /dev/null
+++ b/packages/table copy/props.js
@@ -0,0 +1,62 @@
+export default {
+  data: {
+    type: Array,
+    default: function() {
+      return [];
+    },
+  },
+  size: String,
+  width: [String, Number],
+  height: [String, Number],
+  maxHeight: [String, Number],
+  fit: {
+    type: Boolean,
+    default: true,
+  },
+  stripe: Boolean,
+  border: Boolean,
+  rowKey: [String, Function],
+  context: {},
+  showHeader: {
+    type: Boolean,
+    default: true,
+  },
+  showSummary: Boolean,
+  sumText: String,
+  summaryMethod: Function,
+  rowClassName: [String, Function],
+  rowStyle: [Object, Function],
+  cellClassName: [String, Function],
+  cellStyle: [Object, Function],
+  headerRowClassName: [String, Function],
+  headerRowStyle: [Object, Function],
+  headerCellClassName: [String, Function],
+  headerCellStyle: [Object, Function],
+  highlightCurrentRow: Boolean,
+  currentRowKey: [String, Number],
+  emptyText: String,
+  expandRowKeys: Array,
+  defaultExpandAll: Boolean,
+  defaultSort: Object,
+  tooltipEffect: String,
+  spanMethod: Function,
+  selectOnIndeterminate: {
+    type: Boolean,
+    default: true,
+  },
+  indent: {
+    type: Number,
+    default: 16,
+  },
+  treeProps: {
+    type: Object,
+    default() {
+      return {
+        hasChildren: 'hasChildren',
+        children: 'children',
+      };
+    },
+  },
+  lazy: Boolean,
+  load: Function,
+};
diff --git a/packages/table/editable copy.vue b/packages/table/editable copy.vue
new file mode 100644
index 0000000..99efbb6
--- /dev/null
+++ b/packages/table/editable copy.vue
@@ -0,0 +1,217 @@
+<style lang="scss">
+.z-table-column__cell-editable {
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  .el-icon-edit {
+    color: rgba(151, 151, 151, 0.5);
+    &:hover {
+      color: $primary;
+    }
+  }
+  .el-icon-check {
+    color: $green;
+  }
+  .el-icon-close {
+    color: $red;
+  }
+  .el-icon-edit,
+  .el-icon-check,
+  .el-icon-close {
+    cursor: pointer;
+    margin-left: 5px;
+    font-size: 14px;
+  }
+}
+</style>
+
+<template>
+  <el-table :data="tableData | tableDataFilter" :size="_elSize" v-bind="bindProps" v-on="$listeners" @header-click="onHeaderClick" @cell-click="onCellClick" @cell-dblclick="onCellDblclick">
+    <slot name="left"></slot>
+    <template v-for="(item, index) in columns">
+      <el-table-column v-bind="item" :key="index">
+        <slot :name="`header-${item.prop}`" slot="header"></slot>
+        <template #default="{ row, column, $index }">
+          <cell-editor
+            :disabled="item.editalways || editall || disabled || item.editable === false"
+            :editable="item.editalways || editall || (item.editable !== false && row.$editor && row.$editor.includes(item.prop))"
+            :component="item.component"
+            :value="row[column.property]"
+            @input="value => onCellInput(value, row, column, $index)"
+            @edit-click="setRowEditor(row, column, $index)"
+            @edit-confirm="value => onEditConfirm(value, row, column, $index)"
+          >
+            <template v-if="$scopedSlots[`editor-${item.prop}`]" slot="editor">
+              <slot :name="`editor-${item.prop}`" :value="row[column.property]" :row="row" :index="$index" :onInput="value => onCellInput(value, row, column, $index)"></slot>
+            </template>
+            <template v-if="$scopedSlots[`cell-${item.prop}`]">
+              <slot :name="`cell-${item.prop}`" :value="row[column.property]" :row="row" :index="$index"></slot>
+            </template>
+            <template v-else-if="item.render && typeof item.render === 'function'" #default="{ row, column, $index }">
+              <cell-render :item="item" :value="get(row, item.prop)" :row="row" :column="column" :index="$index"></cell-render>
+            </template>
+          </cell-editor>
+        </template>
+      </el-table-column>
+    </template>
+    <slot></slot>
+    <slot name="append"></slot>
+  </el-table>
+</template>
+
+<script>
+import TableNormal from './normal';
+import tableProps from './props';
+import { cloneDeep, get, set } from '../utils';
+
+export default {
+  name: 'TableEditable',
+  extends: TableNormal,
+  components: {
+    cellEditor: {
+      props: {
+        value: [String, Number, Array, Object, Boolean],
+        component: { type: String, default: 'el-input' },
+        editable: Boolean,
+        disabled: Boolean,
+      },
+      watch: {
+        editable(val) {
+          if (!this.disabled && val && this.component === 'el-input') {
+            this.$nextTick(() => {
+              this.$children[0] && this.$children[0].focus && this.$children[0].focus();
+            });
+          }
+        },
+      },
+      render(h) {
+        if (this.editable) {
+          let editorRender = [
+            h(this.component, {
+              props: { value: this.value, size: 'mini' },
+              on: {
+                input: value => {
+                  this.$emit('input', value);
+                },
+              },
+            }),
+          ];
+          if (this.$scopedSlots.editor) {
+            editorRender = [this.$scopedSlots.editor()];
+          }
+          if (!this.disabled) {
+            const handlerItems = [h('i', { attrs: { title: '确定', class: 'el-icon-check' }, on: { click: () => this.$emit('edit-confirm', this.value) } })];
+            // handlerItems.push(h('i', { attrs: { title: '取消', class: 'el-icon-close' }, on: { click: () => this.$emit('edit-confirm') } }));
+            const handler = h('span', handlerItems);
+            editorRender.push(handler);
+          }
+          return h('span', { class: 'z-table-column__cell-editable' }, editorRender);
+        }
+        let valueRender = [h('span', this.value)];
+        if (this.$scopedSlots.default) {
+          valueRender = [this.$scopedSlots.default()];
+        }
+        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' }, valueRender);
+      },
+    },
+  },
+  props: {
+    value: {
+      type: Array,
+      default() {
+        return [];
+      },
+    },
+    columns: {
+      type: Array,
+      default() {
+        return [];
+      },
+    },
+    editall: Boolean,
+    clickable: Boolean,
+    disabled: Boolean,
+    ...tableProps,
+  },
+  watch: {
+    value(val) {
+      this.tableData = val || [];
+    },
+    data(val) {
+      this.tableData = val || [];
+    },
+    tableData(val) {
+      this.$emit('input', val || []);
+    },
+  },
+  data() {
+    return {
+      tableData: this.value,
+    };
+  },
+  filters: {
+    tableDataFilter(value) {
+      return value.map((item, index) => ({ ...item, $index: index }));
+    },
+  },
+  methods: {
+    onHeaderClick() {
+      if (this.clickable) {
+        this.cancelEditCell();
+      }
+    },
+    onCellClick(row, column) {
+      if (this.clickable) {
+        const prop = column.property;
+        let tableData = cloneDeep(this.tableData);
+        tableData.forEach((item, index) => {
+          if (!(index === row.$index && item.$editor && item.$editor.includes(prop))) {
+            item.$editor = [];
+          }
+        });
+        this.tableData = tableData;
+      }
+    },
+    onCellDblclick(row, column) {
+      if (this.clickable) {
+        this.setRowEditor(row, column, row.$index);
+      }
+    },
+    setRowEditor(row, column, index) {
+      this.cancelEditCell();
+      let tableRow = this.tableData[index];
+      if (tableRow) {
+        if (tableRow.$editor) {
+          tableRow.$editor = [...tableRow.$editor, column.property];
+        } else {
+          tableRow.$editor = [column.property];
+        }
+        this.$set(this.tableData, index, tableRow);
+      }
+    },
+    onEditConfirm(value, row, column, index) {
+      this.$emit('cell-edit-confirm', { row, index, prop: column.property, value });
+      this.cancelEditCell();
+    },
+    cancelEditCell() {
+      this.tableData = this.tableData.map((item, index) => {
+        const newItem = cloneDeep(item);
+        delete newItem.$index;
+        delete newItem.$editor;
+        return newItem;
+      });
+    },
+    onCellInput(value, row, column, index) {
+      const tableData = cloneDeep(this.tableData);
+      const tableRow = tableData[index];
+      set(tableRow, column.property, value);
+      tableData[index] = tableRow;
+      this.$set(this.tableData, index, tableRow);
+    },
+  },
+};
+</script>
diff --git a/packages/table/index.js b/packages/table/index.js
deleted file mode 100644
index a6b2a96..0000000
--- a/packages/table/index.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import tableProps from './props';
-
-export default {
-  name: 'Table',
-  props: {
-    value: {
-      type: Array,
-      default() {
-        return [];
-      },
-    },
-    columns: {
-      type: Array,
-      default() {
-        return [];
-      },
-    },
-    editable: Boolean,
-    editall: Boolean,
-    clickable: Boolean,
-    disabled: Boolean,
-    ...tableProps,
-  },
-  render(h) {
-    return h(`z-table-${this.editable ? 'editable' : 'normal'}`, { props: { ...this._props }, scopedSlots: this.$scopedSlots, on: this.$listeners });
-  },
-};
diff --git a/packages/table/index.vue b/packages/table/index.vue
new file mode 100644
index 0000000..6355c72
--- /dev/null
+++ b/packages/table/index.vue
@@ -0,0 +1,15 @@
+<script>
+import { ref } from '../utils/vnode';
+
+export default {
+  name: 'Table',
+  functional: true,
+  render(h, context) {
+    const props = context.props || {};
+    if (props.editable) {
+      return ref('z-table-editable', context);
+    }
+    return ref('z-table-normal', context);
+  },
+};
+</script>
diff --git a/packages/table/normal copy.vue b/packages/table/normal copy.vue
new file mode 100644
index 0000000..8a93543
--- /dev/null
+++ b/packages/table/normal copy.vue
@@ -0,0 +1,95 @@
+<template>
+  <el-table :data="tableData" :size="_elSize" v-bind="bindProps" v-on="$listeners">
+    <slot name="left"></slot>
+    <template v-for="(item, index) in columns">
+      <el-table-column v-bind="item" :key="index">
+        <slot :name="`header-${item.prop}`" slot="header"></slot>
+        <template v-if="$scopedSlots[`cell-${item.prop}`]" #default="{ row, column, $index }">
+          <slot :name="`cell-${item.prop}`" :value="get(row, item.prop)" :row="row" :column="column" :index="$index"></slot>
+        </template>
+        <template v-else-if="item.render && typeof item.render === 'function'" #default="{ row, column, $index }">
+          <cell-render :item="item" :value="get(row, item.prop)" :row="row" :column="column" :index="$index"></cell-render>
+        </template>
+      </el-table-column>
+    </template>
+    <slot></slot>
+    <slot name="append"></slot>
+  </el-table>
+</template>
+
+<script>
+import tableProps from './props';
+import { get } from '../utils';
+
+export default {
+  name: 'TableNormal',
+  components: {
+    CellRender: {
+      functional: true,
+      render(h, context) {
+        const props = context.props;
+        const item = props.item || {};
+        const content = item.render(props.value, props.row, h, props.index);
+        return typeof content === 'string' ? h('span', {}, [content]) : content;
+      },
+    },
+  },
+  inject: {
+    elForm: {
+      default: '',
+    },
+    elFormItem: {
+      default: '',
+    },
+  },
+  props: {
+    value: {
+      type: Array,
+      default() {
+        return [];
+      },
+    },
+    columns: {
+      type: Array,
+      default() {
+        return [];
+      },
+    },
+    ...tableProps,
+  },
+  data() {
+    return {
+      tableData: this.value.length > 0 ? this.value : this.data,
+    };
+  },
+  watch: {
+    value(val) {
+      this.tableData = val || [];
+    },
+    data(val) {
+      this.tableData = val || [];
+    },
+  },
+  computed: {
+    _elFormItemSize() {
+      return (this.elFormItem || {}).elFormItemSize;
+    },
+    _elSize() {
+      return this.size || this._elFormItemSize || (this.elForm || {}).size || (this.$ELEMENT || {}).size;
+    },
+    bindProps() {
+      const tablePropsKeys = Object.keys(tableProps);
+      let props = {};
+      Object.keys(this._props).forEach(key => {
+        if (tablePropsKeys.includes(key)) {
+          props[key] = this._props[key];
+        }
+      });
+      return props;
+    },
+  },
+  methods: {
+    get,
+  },
+};
+</script>
diff --git a/packages/table/normal.vue b/packages/table/normal.vue
index 8a93543..24b3961 100644
--- a/packages/table/normal.vue
+++ b/packages/table/normal.vue
@@ -1,95 +1,73 @@
-<template>
-  <el-table :data="tableData" :size="_elSize" v-bind="bindProps" v-on="$listeners">
-    <slot name="left"></slot>
-    <template v-for="(item, index) in columns">
-      <el-table-column v-bind="item" :key="index">
-        <slot :name="`header-${item.prop}`" slot="header"></slot>
-        <template v-if="$scopedSlots[`cell-${item.prop}`]" #default="{ row, column, $index }">
-          <slot :name="`cell-${item.prop}`" :value="get(row, item.prop)" :row="row" :column="column" :index="$index"></slot>
-        </template>
-        <template v-else-if="item.render && typeof item.render === 'function'" #default="{ row, column, $index }">
-          <cell-render :item="item" :value="get(row, item.prop)" :row="row" :column="column" :index="$index"></cell-render>
-        </template>
-      </el-table-column>
-    </template>
-    <slot></slot>
-    <slot name="append"></slot>
-  </el-table>
-</template>
-
 <script>
-import tableProps from './props';
 import { get } from '../utils';
 
+// 标题渲染
+function headerRender(h, context, item) {
+  const headerSlot = context.scopedSlots[`header-${item.prop}`];
+  return function(scope) {
+    if (headerSlot) {
+      return headerSlot(scope);
+    }
+    return item.label;
+  };
+}
+
+// 单元格渲染
+function cellRender(h, context, item) {
+  const cellSlot = context.scopedSlots[`cell-${item.prop}`];
+  return function(scope) {
+    const value = get(scope.row, item.prop);
+    // 自定义具名插槽
+    if (cellSlot) {
+      return cellSlot({
+        item,
+        value,
+        index: scope.$index,
+        ...scope,
+      });
+    }
+    // 自定义渲染函数
+    if (item.render) {
+      return item.render(value, scope.row, h, scope.$index);
+    }
+    // 默认取值
+    return get(scope.row, item.prop);
+  };
+}
+
+// 跟进columns生成列
+function createElTableColumns(h, context, columns) {
+  return columns.map((item, index) => {
+    const { attrs, on, ...props } = item;
+    // 处理插槽
+    const scopedSlots = {
+      header: headerRender(h, context, item),
+      default: cellRender(h, context, item),
+    };
+    return h('el-table-column', { key: index, attrs, props, on, scopedSlots });
+  });
+}
+
 export default {
   name: 'TableNormal',
-  components: {
-    CellRender: {
-      functional: true,
-      render(h, context) {
-        const props = context.props;
-        const item = props.item || {};
-        const content = item.render(props.value, props.row, h, props.index);
-        return typeof content === 'string' ? h('span', {}, [content]) : content;
-      },
-    },
-  },
-  inject: {
-    elForm: {
-      default: '',
-    },
-    elFormItem: {
-      default: '',
-    },
-  },
-  props: {
-    value: {
-      type: Array,
-      default() {
-        return [];
-      },
-    },
-    columns: {
-      type: Array,
-      default() {
-        return [];
-      },
-    },
-    ...tableProps,
-  },
-  data() {
-    return {
-      tableData: this.value.length > 0 ? this.value : this.data,
-    };
-  },
-  watch: {
-    value(val) {
-      this.tableData = val || [];
-    },
-    data(val) {
-      this.tableData = val || [];
-    },
-  },
-  computed: {
-    _elFormItemSize() {
-      return (this.elFormItem || {}).elFormItemSize;
-    },
-    _elSize() {
-      return this.size || this._elFormItemSize || (this.elForm || {}).size || (this.$ELEMENT || {}).size;
-    },
-    bindProps() {
-      const tablePropsKeys = Object.keys(tableProps);
-      let props = {};
-      Object.keys(this._props).forEach(key => {
-        if (tablePropsKeys.includes(key)) {
-          props[key] = this._props[key];
-        }
-      });
-      return props;
-    },
-  },
-  methods: {
-    get,
+  functional: true,
+  render(h, context) {
+    const props = context.props || {};
+    let scopedSlots = context.scopedSlots || {};
+    // 如有默认插槽则相当于直接写el-table
+    if (scopedSlots.default) {
+      return h('el-table', context);
+    }
+    const columns = props.columns || [];
+    // 通过columns快速生成el-table-column
+    const elTableColumns = createElTableColumns(h, context, columns);
+    // 前置插槽
+    const prependSlot = scopedSlots.prepend ? scopedSlots.prepend() : '';
+    // 后置插槽
+    const appendSlot = scopedSlots.append ? scopedSlots.append() : '';
+    // 渲染组件时移除当前组件特有的props，避免透传不必要的参数
+    delete context.columns;
+    return h('el-table', context, [prependSlot, ...elTableColumns, appendSlot]);
   },
 };
 </script>
diff --git a/packages/table/props.js b/packages/table/props.js
index 7ea8926..adca911 100644
--- a/packages/table/props.js
+++ b/packages/table/props.js
@@ -5,6 +5,7 @@ export default {
       return [];
     },
   },
+  mode: 'normal', // normal | edit-column | edit-cell | edit-row | edit-all
   size: String,
   width: [String, Number],
   height: [String, Number],
diff --git a/packages/utils/vnode.js b/packages/utils/vnode.js
new file mode 100644
index 0000000..465b363
--- /dev/null
+++ b/packages/utils/vnode.js
@@ -0,0 +1,25 @@
+// 注册函数式组件ref
+export function registerRef(vnode, context) {
+  if (!context.data.ref) {
+    return vnode;
+  }
+  // 备份vnode原有的insert周期函数
+  const hackInsert = vnode.data.hook.insert;
+  // 新的vnode的insert周期函数
+  vnode.data.hook.insert = function(config) {
+    hackInsert(config);
+    // 当vnode生成实例后，通过上下文反写入父组件的refs；
+    context.parent.$refs[context.data.ref] = config.componentInstance || config.elm; // ref本身就有组件实例和dom节点两种情况，优先取实例
+  };
+  return vnode;
+}
+
+// 简写注册ref
+export function ref(name, context) {
+  return registerRef(context._c(name, context), context);
+}
+
+export default {
+  registerRef,
+  ref,
+};
--
libgit2 0.21.0