From db24c0878f51027164b5ba85449135b7b22384a5 Mon Sep 17 00:00:00 2001
From: 刘汉宸 <liuhanchen@zeyihuoyun.com>
Date: Mon, 1 Mar 2021 20:05:30 +0800
Subject: [PATCH] feat: 修改SchemaTable组件

---
 examples/views/docs/component/schema-filter.md |   2 +-
 examples/views/docs/component/schema-table.md  | 149 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++---------------------------------------------------------------
 examples/views/docs/component/table.md         |   7 ++++++-
 packages/schema-table/cell-editable.vue        |  90 ------------------------------------------------------------------------------------------
 packages/schema-table/cell-value-render.js     |  20 --------------------
 packages/schema-table/editable.vue             | 319 -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
 packages/schema-table/index.vue                | 192 +++++++++++++++++-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
 packages/select/index.bak.vue                  | 268 ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
 packages/table/editable.vue                    |  86 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++------------------------------
 packages/table/index.js                        |   1 +
 packages/table/normal.vue                      |  26 +++++++++++++++++++++++++-
 11 files changed, 192 insertions(+), 968 deletions(-)
 delete mode 100644 packages/schema-table/cell-editable.vue
 delete mode 100644 packages/schema-table/cell-value-render.js
 delete mode 100644 packages/schema-table/editable.vue
 delete mode 100644 packages/select/index.bak.vue

diff --git a/examples/views/docs/component/schema-filter.md b/examples/views/docs/component/schema-filter.md
index 6820450..8f644fd 100644
--- a/examples/views/docs/component/schema-filter.md
+++ b/examples/views/docs/component/schema-filter.md
@@ -1,4 +1,4 @@
-# Schema Filter 筛选
+# Schema Filter 方案筛选
 
 通过配置JSON Schema的方式快速生成一个筛选表单
 
diff --git a/examples/views/docs/component/schema-table.md b/examples/views/docs/component/schema-table.md
index f436981..8821f76 100644
--- a/examples/views/docs/component/schema-table.md
+++ b/examples/views/docs/component/schema-table.md
@@ -1,30 +1,32 @@
-# Schema Table 表格
+# Schema Table 方案表格
 
-根据JSON Schema配置自动生成表格
+通过配置JSON Schema的方式快速生成一个表格
 
 ## 基础用法
 
-配置`list`属性设置JSON Schema配置列表
+`schema`设置配置项，其中**props**参数与`z-table`组件参数相同，**items**则对应`z-table`组件的`columns`。
 
-::: snippet `tableProps`设置表格参数
+::: snippet 本质上是通过`schema`的方式实现生成一个`z-table`
 
 ```html
 <template>
-  <z-schema-table v-model="tableData" :list="list" :tableProps="{ border: true }"></z-schema-table>
+  <z-schema-table v-model="model" :schema="schema"></z-schema-table>
 </template>
 
 <script>
 export default {
   data() {
     return {
-      tableData: [
+      model: [
         { name: '张三', age: 16 },
         { name: '李四', age: 24 }
       ],
-      list: [
-        { label: '姓名', key: 'name' },
-        { label: '年龄', key: 'age', props: { 'controls-position': 'right' } },
-      ]
+      schema: {
+        items: [
+          { label: '姓名', prop: 'name' },
+          { label: '年龄', prop: 'age' },
+        ]
+      }
     }
   } 
 }
@@ -33,17 +35,20 @@ export default {
 
 :::
 
-## 自定义渲染
-
-配置`list`属性设置JSON Schema配置列表
+## 自定义列
 
-<div class="code-snippet-box">
+支持自定义列的内容
 
-::: snippet `render`函数式渲染
+::: snippet 插槽`header-列字段名`可自定义表头的内容，插槽`cell-列字段名`可自定义列单元格的内容，用法与`z-table`相同。
 
 ```html
 <template>
-  <z-schema-table v-model="tableData" :list="list"></z-schema-table>
+  <z-schema-table v-model="tableData" :schema="schema">
+    <template #header-age>年龄 <i class="el-icon-question"></i></template>
+    <template #cell-gender="{ value }">
+      <el-tag size="mini">{{ value }}</el-tag>
+    </template>
+  </z-schema-table>
 </template>
 
 <script>
@@ -51,30 +56,35 @@ export default {
   data() {
     return {
       tableData: [
-        { name: '张三', age: 16 },
-        { name: '李四', age: 24 }
+        { name: '张三', age: '31', gender: '男' },
+        { name: '李四', age: '27', gender: '女' },
+        { name: '王五', age: '16', gender: '男' },
       ],
-      list: [
-        { label: '姓名', key: 'name', render: (h, { value }) => { return h('span', { style: { background: 'rgba(255, 0, 0, 0.5)', color: '#fff' } }, value) } },
-        { label: '年龄', key: 'age', props: { 'controls-position': 'right' } },
-      ]
-    }
-  } 
+      schema: {
+        props: { border: true, size: 'mini' },
+        items: [
+          { prop: 'name', label: '姓名' },
+          { prop: 'age', label: '年龄' },
+          { prop: 'gender', label: '性别' },
+        ]
+      }
+    };
+  },
 }
 </script>
 ```
 
 :::
 
-::: snippet `slot`插槽式渲染
+## 列渲染
+
+除了使用插槽自定义列的内容之外，也支持直接在配置项中写渲染函数
+
+::: snippet 配置项中的`render`可以设置对应列单元格的渲染
 
 ```html
 <template>
-  <z-schema-table v-model="tableData" :list="list">
-    <template #value-age="{ value }">
-      <el-tag v-if="value" :type="value > 16 ? 'success' : 'danger'" size="mini" disable-transitions>{{ value }}</el-tag>
-    </template>
-  </z-schema-table>
+  <z-schema-table v-model="tableData" :schema="schema"></z-schema-table>
 </template>
 
 <script>
@@ -82,32 +92,50 @@ export default {
   data() {
     return {
       tableData: [
-        { name: '张三', age: 16 },
-        { name: '李四', age: 24 }
+        { name: '张三', age: '31', gender: '男', ticket: true },
+        { name: '李四', age: '27', gender: '女', ticket: false },
+        { name: '王五', age: '16', gender: '男', ticket: false },
       ],
-      list: [
-        { type: 'el-input', label: '姓名', key: 'name' },
-        { type: 'el-input-number', label: '年龄', key: 'age', props: { 'controls-position': 'right' } },
-      ]
-    }
-  } 
+      schema: {
+        props: { border: true, size: 'mini' },
+        items: [
+          { prop: 'name', label: '姓名' },
+          { prop: 'age', label: '年龄', render: (value, row, h) => h(Number(value) > 20 ? 'b' : 'span', { style: { color: Number(value) > 20 ? 'red' : 'green' } }, value) },
+          { prop: 'gender', label: '性别', render: (value, row, h) => h('el-tag', { props: { size: 'mini', type: 'info' } }, value) },
+          { prop: 'ticket', label: '开票', render: value => value ? '是' : '否' },
+        ]
+      }
+    };
+  },
 }
 </script>
 ```
 
 :::
 
-</div>
+## 追加列
 
-## 层级分组
+使用配置项时，**新增的列**则默认追加在**配置项列**之后，使用`left`插槽可在表格的最左侧插入列，顺序在**配置项列**之前
 
-支持`group`分组，兼容form组件，使同一个schema能够同时复用在`table`、`form`上
-
-::: snippet `group`设置分组，其中`key`设置分组对象名称
+::: snippet 用法与`z-table`相同
 
 ```html
 <template>
-  <z-schema-table v-model="tableData" :list="list" :tableProps="{ border: true }"></z-schema-table>
+  <z-schema-table v-model="tableData" :schema="schema">
+    <template #left>
+      <el-table-column type="selection" width="40"></el-table-column>
+      <el-table-column label="左侧的列">
+        <template #default="{ $index }">
+          内容 {{ $index }}
+        </template>
+      </el-table-column>
+    </template>
+    <el-table-column label="操作" width="120">
+      <template #default="{ $index }">
+        <el-button type="text">编辑第{{ $index + 1 }}行</el-button>
+      </template>
+    </el-table-column>
+  </z-schema-table>
 </template>
 
 <script>
@@ -115,22 +143,20 @@ export default {
   data() {
     return {
       tableData: [
-        { name: '张三', age: 16, location: { city: '上海', address: '青浦区' } },
-        { name: '李四', age: 24, location: { city: '北京', address: '朝阳区' } }
+        { name: '张三', age: '31', gender: '男' },
+        { name: '李四', age: '27', gender: '女' },
+        { name: '王五', age: '16', gender: '男' },
       ],
-      list: [
-        { label: '姓名', key: 'name' },
-        { label: '年龄', key: 'age', props: { 'controls-position': 'right' } },
-        {
-          group: { key: 'location' },
-          list: [
-            { label: '城市', key: 'city' },
-          ]
-        },
-        { label: '地址', key: 'location.address' },
-      ]
-    }
-  } 
+      schema: {
+        props: { size: 'mini', border: true } ,
+        items: [
+          { prop: 'name', label: '姓名' },
+          { prop: 'age', label: '年龄' },
+          { prop: 'gender', label: '性别' },
+        ]
+      }
+    };
+  },
 }
 </script>
 ```
@@ -144,10 +170,7 @@ export default {
 参数|说明|类型|可选值|默认值
 -|-|-|-|-
 value | 表格数据 | Array | - | -
-list | JSON Schema配置项列表 | Array | - | []
-tableProps | 表格参数 | Object | - | -
-tableEvents | 表格参数 | Object | - | -
-minWidth | 列宽 | Number | - | -
+schema | JSON Schema配置项列表 | Array | - | []
 
 ## Events 事件
 
diff --git a/examples/views/docs/component/table.md b/examples/views/docs/component/table.md
index 6a2a360..c0ae9b7 100644
--- a/examples/views/docs/component/table.md
+++ b/examples/views/docs/component/table.md
@@ -132,15 +132,19 @@ export default {
   <div>
     <z-form span="6">
       <z-form-item>编辑模式：<el-switch v-model="editable"></el-switch></z-form-item>
+      <z-form-item>编辑全部：<el-switch v-model="editall"></el-switch></z-form-item>
       <z-form-item>双击编辑：<el-switch v-model="clickable"></el-switch></z-form-item>
     </z-form>
-    <z-table v-model="tableData" :editable="editable" :columns="columns" border :clickable="clickable" @cell-edit-confirm="onCellEditConfirm">
+    <z-table v-model="tableData" size="mini" :editable="editable" :columns="columns" border :clickable="clickable" @cell-edit-confirm="onCellEditConfirm" :editall="editall">
       <template #editor-gender="{ value, onInput, index }">
         <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>
+      <template #cell-gender="{ value }">
+        <el-tag size="mini" type="info" disable-transitions>{{ value }}</el-tag>
+      </template>
       <el-table-column label="操作" width="80">
         <template #default="{ $index }">
           <el-button type="text" @click="deleteRow($index)">删除</el-button>
@@ -154,6 +158,7 @@ export default {
 export default {
   data() {
     return {
+      editall: false,
       editable: true,
       clickable: true,
       tableData: [
diff --git a/packages/schema-table/cell-editable.vue b/packages/schema-table/cell-editable.vue
deleted file mode 100644
index 9dba927..0000000
--- a/packages/schema-table/cell-editable.vue
+++ /dev/null
@@ -1,90 +0,0 @@
-<style>
-.z-table-cell-editable {
-  display: flex;
-  align-items: center;
-}
-.z-table-cell-editable .z-table-cell-editable__icon {
-  cursor: pointer;
-  vertical-align: middle;
-  padding-left: 5px;
-  fill: #2f54eb;
-}
-</style>
-
-<template>
-  <div>
-    <!-- 可编辑状态 -->
-    <div v-if="editable" class="z-table-cell-editable">
-      <component :value="$_get(row, item.fullKey)" :is="item.type" v-bind="item.props" :style="item.style" size="mini" @input="onInput"></component>
-      <span v-if="btnVisible !== false" @click="onConfirm">
-        <svg class="z-table-cell-editable__icon" viewBox="0 0 1024 1024" width="24" height="24">
-          <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>
-        </svg>
-      </span>
-    </div>
-    <!-- 渲染状态 -->
-    <template v-else>
-      <!-- 渲染插槽 -->
-      <template v-if="$scopedSlots['default']">
-        <slot></slot>
-      </template>
-      <!-- 默认渲染 -->
-      <template v-else>
-        {{ $_get(row, item.agentKey || item.fullKey) }}
-      </template>
-    </template>
-  </div>
-</template>
-
-<script>
-import { get } from '../utils';
-
-export default {
-  name: 'cellEditable',
-  props: {
-    row: Object,
-    item: Object,
-    editable: Boolean,
-    btnVisible: Boolean,
-  },
-  data() {
-    return {
-      oldValue: undefined,
-      value: undefined,
-      confirm: false,
-    };
-  },
-  watch: {
-    editable(val) {
-      if (val) {
-        this.confirm = false;
-        this.oldValue = get(this.row, this.item.agentKey || this.item.fullKey);
-        this.value = get(this.row, this.item.agentKey || this.item.fullKey);
-      } else {
-        if (!this.confirm) {
-          this.$emit('cancel', this.emitData);
-        }
-      }
-    },
-  },
-  computed: {
-    emitData() {
-      const { oldValue, value, row, item } = this;
-      return { oldValue, value, row, key: item.key, fullKey: item.fullKey };
-    },
-  },
-  methods: {
-    $_get: get,
-    // 组件触发input事件
-    onInput(value) {
-      this.value = value;
-      this.$emit('update', this.emitData);
-    },
-    // 当点击确认
-    onConfirm() {
-      this.confirm = true;
-      this.$emit('done', this.emitData);
-    },
-  },
-};
-</script>
diff --git a/packages/schema-table/cell-value-render.js b/packages/schema-table/cell-value-render.js
deleted file mode 100644
index 8834bdb..0000000
--- a/packages/schema-table/cell-value-render.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import { get } from '../utils';
-
-export default {
-  props: { row: Object, column: Object, index: [Number, String], item: Object },
-  render(h) {
-    const { row, column, index, item } = this;
-    if (typeof item.render === 'function') {
-      return item.render(h, { row, value: get(row, item.fullKey), $index: index, column });
-    } else {
-      if (item.render.children instanceof Function) {
-        return h(
-          item.render.type,
-          { props: item.render.props, attrs: item.render.props, style: item.render.style },
-          item.render.children({ row, value: get(row, item.fullKey), $index: index, column }),
-        );
-      }
-      return h(item.render.type, { props: item.render.props, attrs: item.render.props, style: item.render.style }, item.render.children || get(row, item.fullKey));
-    }
-  },
-};
diff --git a/packages/schema-table/editable.vue b/packages/schema-table/editable.vue
deleted file mode 100644
index e668f91..0000000
--- a/packages/schema-table/editable.vue
+++ /dev/null
@@ -1,319 +0,0 @@
-<style>
-.z-table {
-  width: 100%;
-}
-</style>
-
-<template>
-  <div @keyup.enter="tableEditCell = {}">
-    <div style="padding-bottom: 10px;">
-      <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 && !rowEdit">取消</el-button>
-      <el-button @click="handleDelete" size="mini" type="danger" v-if="tableSelection.length > 0">删除</el-button>
-    </div>
-    <el-table
-      class="z-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>
-      <!-- 根据配置列表生成表格列 -->
-      <template v-if="tableList && tableList.length > 0">
-        <template v-for="(item, index) in tableList">
-          <template v-if="bindItemVisible(item.visible)">
-            <!-- 如果有表格列具名插槽 -->
-            <slot v-if="$scopedSlots[item.keyPath.join('-')]" :name="item.keyPath.join('-')" v-bind="item"></slot>
-            <!-- 默认表格列渲染 -->
-            <el-table-column v-else v-bind="item" :prop="item.fullKey || item.key" :key="index" :min-width="minWidth || item.minWidth || item['min-width'] || (editable ? 140 : undefined)">
-              <template #default="{ row, column, $index }">
-                <cell-editable
-                  :editable="row.$editable || (editable && tableEditCell.index === row.$index && tableEditCell.key === (item.agentKey || item.fullKey || item.key))"
-                  :row="row"
-                  :item="item"
-                  @update="onCellUpdate"
-                  @done="onCellUpdateDone"
-                  @cancel="onCellUpdateCancel"
-                  :btn-visible="!row.$editable"
-                >
-                  <!-- 如果有表格列值渲染具名插槽 -->
-                  <slot
-                    v-if="$scopedSlots[`value-${item.keyPath.join('-')}`]"
-                    :name="`value-${item.keyPath.join('-')}`"
-                    v-bind="item"
-                    :row="row"
-                    :value="$_get(row, item.fullKey)"
-                    :column="column"
-                    :index="$index"
-                  ></slot>
-                  <!-- 如果表格列配置了值渲染参数 -->
-                  <cell-value-render v-else-if="item.render" :row="row" :column="column" :index="$index" :item="item" />
-                </cell-editable>
-              </template>
-            </el-table-column>
-          </template>
-        </template>
-      </template>
-      <!-- 已生成列表后的追加列插槽 -->
-      <slot name="column-append"></slot>
-      <!-- 末尾列插槽 -->
-      <slot name="column-end"></slot>
-    </el-table>
-  </div>
-</template>
-
-<script>
-import { cloneDeep, get, set } from '../utils';
-import CellEditable from './cell-editable';
-import CellValueRender from './cell-value-render';
-
-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,
-    CellValueRender,
-  },
-  props: {
-    // 用于实例化本组件绑定v-model的值
-    value: Array,
-    // 配置列表
-    list: {
-      type: Array,
-      required: true,
-    },
-    // 表格参数
-    tableProps: {
-      type: Object,
-      default() {
-        return {};
-      },
-    },
-    // 表格事件
-    tableEvents: Object,
-    // 是否可编辑
-    editable: Boolean,
-    // 列宽
-    minWidth: Number,
-  },
-  data() {
-    return {
-      tableList: [], // 表格配置列表
-      tableData: [], // 表格数据
-      tableRowTemplate: { $editable: true }, // 行数据模板
-      tableEditCell: {}, // 正在编辑的单元格
-      tableSelection: [], // 表格已选中
-    };
-  },
-  computed: {
-    // 表格实体
-    instance: {
-      get() {
-        return this.$refs.table;
-      },
-    },
-    // 行编辑状态
-    rowEditable() {
-      return listHasKey(this.tableData, '$editable');
-    },
-    // 存在新行
-    rowNew() {
-      return listHasKey(this.tableData, '$new');
-    },
-    // 存在编辑行
-    rowEdit() {
-      return listHasKey(this.tableData, '$edit');
-    },
-  },
-  watch: {
-    value: {
-      handler(val = []) {
-        this.tableData = val.map((o, i) => {
-          return { ...o, $index: i, $editable: undefined, $new: undefined };
-        });
-      },
-      immediate: true,
-    },
-    list: {
-      handler(val) {
-        // 深度克隆传入的列表，避免原始值被修改
-        const newList = cloneDeep(this.list);
-        // 生成列表值的全路径key，即列表项为对象时，对象内的key与上一级的key合并作为全路径key
-        const generateFullKey = (list, parentKey) => {
-          list.forEach(item => {
-            if (item.group && item.list) {
-              if (item.group.key) {
-                item.fullKey = `${parentKey ? `${parentKey}.${item.group.key}` : item.group.key}`;
-              } else {
-                item.fullKey = parentKey || item.key;
-              }
-              generateFullKey(item.list, item.fullKey);
-            } else {
-              item.fullKey = `${parentKey ? `${parentKey}.${item.key}` : item.key}`;
-            }
-          });
-        };
-        // 生成fullKey
-        generateFullKey(newList);
-        // 创建输出列表
-        const result = [];
-        const tableRowTemplate = {};
-        // 生成列表值的全路径key，即列表项为对象时，对象内的key与上一级的key合并作为全路径key
-        const generateFlatList = list => {
-          list.forEach(item => {
-            if (item.group && item.list) {
-              generateFlatList(item.list);
-            } else if (!item.group && !item.list) {
-              result.push({ ...item, keyPath: item.fullKey.split('.') });
-              set(tableRowTemplate, item.fullKey, undefined);
-              tableRowTemplate.$editable = true;
-            }
-          });
-        };
-        generateFlatList(newList);
-        this.tableList = result;
-        this.tableRowTemplate = tableRowTemplate;
-      },
-      immediate: true,
-    },
-  },
-  methods: {
-    $_get: get,
-    // 处理新增逻辑
-    handleNew() {
-      const tableData = cloneDeep(this.tableData);
-      tableData.push({ ...this.tableRowTemplate, $new: true });
-      this.tableEditCell = {};
-      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.tableData = tableData.map((o, i) => ({ ...o, $index: i }));
-    },
-    // 处理保存逻辑
-    handleSave() {
-      const tableData = cloneDeep(this.tableData);
-      tableData.forEach((r, i) => {
-        delete tableData[i].$editable;
-      });
-      this.tableEditCell = {};
-      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.map((o, i) => {
-            return { ...o, $index: i, $editable: undefined, $new: undefined, $edit: undefined };
-          }),
-        );
-      } else {
-        this.tableData = tableData;
-      }
-    },
-    // 绑定表格列显示隐藏状态
-    bindItemVisible(visible = true) {
-      let result = visible;
-      if (typeof visible === 'function') {
-        result = visible(this.tableData);
-      }
-      return result;
-    },
-    // 双击单元格
-    onCellDblclick(row, column, cell, event) {
-      if (this.editable && !this.rowNew) {
-        this.tableEditCell = { index: row.$index, key: column.property };
-      }
-    },
-    // 编辑表格更新值
-    onCellUpdate({ oldValue, value, row, key, fullKey }) {
-      this.setCellValue({ value, row, key, fullKey });
-    },
-    // 编辑表格确认
-    onCellUpdateDone({ oldValue, value, row, key, fullKey }) {
-      this.tableEditCell = {};
-      if (this.$listeners['cell-edit']) {
-        const { tableData } = this.setCellValue({ value, row, key, fullKey });
-        this.emitTableData(tableData);
-        this.$emit('cell-edit', { row, key, fullKey, value });
-      }
-    },
-    // 表格取消编辑
-    onCellUpdateCancel({ oldValue, value, row, key, fullKey }) {
-      if (row.$new !== true) {
-        this.setCellValue({ value: oldValue, row, key, fullKey });
-      }
-    },
-    // 设置表格值
-    setCellValue({ value, row, key, fullKey }) {
-      const tableData = cloneDeep(this.tableData);
-      const tableRow = tableData[row.$index];
-      set(tableRow, fullKey, value);
-      tableData[row.$index] = tableRow;
-      this.$set(this.tableData, row.$index, tableRow);
-      return { tableData, tableRow };
-    },
-    // 表格选中
-    onSelectionChange(selection) {
-      this.tableSelection = selection;
-      this.$emit('selection', selection);
-    },
-  },
-};
-</script>
diff --git a/packages/schema-table/index.vue b/packages/schema-table/index.vue
index f30beb4..1bc429c 100644
--- a/packages/schema-table/index.vue
+++ b/packages/schema-table/index.vue
@@ -1,197 +1,39 @@
-<style>
-.z-schema-table {
-  width: 100%;
-}
-</style>
-
-<template>
-  <el-table
-    class="z-schema-table"
-    ref="table"
-    :data="tableData"
-    v-bind="{ size, ...tableProps }"
-    v-on="tableEvents"
-    @select="onSelect"
-    @select-all="onSelectAll"
-    @selection-change="onSelectionChange"
-  >
-    <!-- 默认表格插槽 -->
-    <slot name="default"></slot>
-    <!-- 根据配置列表生成表格列 -->
-    <template v-if="tableList && tableList.length > 0">
-      <template v-for="(item, index) in tableList">
-        <template v-if="bindItemVisible(item.visible)">
-          <!-- 如果有表格列具名插槽 -->
-          <slot v-if="$scopedSlots[item.keyPath.join('-')]" :name="item.keyPath.join('-')" v-bind="item"></slot>
-          <!-- 默认表格列渲染 -->
-          <el-table-column v-else v-bind="{ ...item, type: undefined }" :prop="item.fullKey || item.key" :key="index" :min-width="minWidth || item.minWidth || item['min-width']">
-            <template #default="{ row, column, $index }">
-              <cell-render :row="row" :item="item">
-                <!-- 如果有表格列值渲染具名插槽 -->
-                <slot
-                  v-if="$scopedSlots[`value-${item.keyPath.join('-')}`]"
-                  :name="`value-${item.keyPath.join('-')}`"
-                  v-bind="item"
-                  :row="row"
-                  :value="$_get(row, item.fullKey)"
-                  :column="column"
-                  :index="$index"
-                ></slot>
-                <!-- 如果表格列配置了值渲染参数 -->
-                <cell-value-render v-else-if="item.render" :row="row" :column="column" :index="$index" :item="item" />
-              </cell-render>
-            </template>
-          </el-table-column>
-        </template>
-      </template>
-    </template>
-    <!-- 已生成列表后的追加列插槽 -->
-    <slot name="column-append"></slot>
-    <!-- 末尾列插槽 -->
-    <slot name="column-end"></slot>
-  </el-table>
-</template>
-
 <script>
-import { cloneDeep, get, set } from '../utils';
-import CellValueRender from './cell-value-render';
-
 export default {
   name: 'SchemaTable',
-  components: {
-    CellRender: {
-      props: { row: Object, item: Object },
-      render(h) {
-        if (this.$scopedSlots.default) {
-          return h('span', this.$scopedSlots.default());
-        } else {
-          return h('span', get(this.row, this.item.agentKey || this.item.fullKey));
-        }
-      },
-    },
-    CellValueRender,
-  },
   props: {
-    // 用于实例化本组件绑定v-model的值
-    value: Array,
-    // 配置列表
-    list: {
+    value: {
       type: Array,
-      required: true,
+      default() {
+        return [];
+      },
     },
-    // 表格参数
-    tableProps: {
+    schema: {
       type: Object,
-      default: () => ({}),
-    },
-    // 表格事件
-    tableEvents: Object,
-    // 列宽
-    minWidth: Number,
-    // 大小
-    size: {
-      type: String,
-      default: 'small',
+      required: true,
     },
   },
   data() {
     return {
-      tableList: [], // 表格配置列表
-      tableData: [], // 表格数据
+      model: this.value,
     };
   },
-  computed: {
-    // 表格实体
-    instance: {
-      get() {
-        return this.$refs.table;
-      },
-    },
-  },
   watch: {
-    value: {
-      handler(val = []) {
-        this.tableData = val;
-      },
-      immediate: true,
+    value(val = []) {
+      this.model = val;
     },
-    list: {
+    model: {
       handler(val) {
-        // 深度克隆传入的列表，避免原始值被修改
-        const newList = cloneDeep(this.list);
-        // 生成列表值的全路径key，即列表项为对象时，对象内的key与上一级的key合并作为全路径key
-        const generateFullKey = (list, parentKey) => {
-          list.forEach(item => {
-            if (item.group && item.list) {
-              if (item.group.key) {
-                item.fullKey = `${parentKey ? `${parentKey}.${item.group.key}` : item.group.key}`;
-              } else {
-                item.fullKey = parentKey || item.key;
-              }
-              generateFullKey(item.list, item.fullKey);
-            } else {
-              item.fullKey = `${parentKey ? `${parentKey}.${item.key}` : item.key}`;
-            }
-          });
-        };
-        // 生成fullKey
-        generateFullKey(newList);
-        // 创建输出列表
-        const result = [];
-        // 生成列表值的全路径key，即列表项为对象时，对象内的key与上一级的key合并作为全路径key
-        const generateFlatList = list => {
-          list.forEach(item => {
-            if (item.group && item.list) {
-              generateFlatList(item.list);
-            } else if (!item.group && !item.list) {
-              result.push({ ...item, keyPath: item.fullKey.split('.') });
-            }
-          });
-        };
-        generateFlatList(newList);
-        this.tableList = result;
+        this.$emit('input', val);
       },
-      immediate: true,
+      deep: true,
     },
   },
-  methods: {
-    $_get: get,
-    // 绑定表格列显示隐藏状态
-    bindItemVisible(visible = true) {
-      let result = visible;
-      if (typeof visible === 'function') {
-        result = visible(this.tableData);
-      }
-      return result;
-    },
-    // 选中单行
-    onSelect(selection, row) {
-      if (selection.find(i => i.id === row.id)) {
-        this.$emit('selection-change', [row], 'check');
-      } else {
-        this.$emit('selection-change', [row], 'uncheck');
-      }
-    },
-    // 切换全选
-    onSelectAll(selection) {
-      if (selection && selection.length > 0) {
-        this.$emit('selection-change', selection, 'check');
-      } else {
-        this.$emit('selection-change', this.tableData, 'uncheck');
-      }
-    },
-    // 表格选中
-    onSelectionChange(selection) {
-      this.$emit('selection', selection);
-    },
-    // 切换某行选中状态
-    toggleRowSelection(row, selected) {
-      this.$refs.table && this.$refs.table.toggleRowSelection(row, selected);
-    },
-    // 清除表格选中
-    clearSelection() {
-      this.$refs.table && this.$refs.table.clearSelection();
-    },
+  render(h) {
+    const schema = this.schema || {};
+    const _props = schema.props || {};
+    const _on = schema.on || {};
+    return h('z-table', { props: { value: this.model, columns: schema.items, ..._props }, on: _on, scopedSlots: this.$scopedSlots });
   },
 };
 </script>
diff --git a/packages/select/index.bak.vue b/packages/select/index.bak.vue
deleted file mode 100644
index bd1391a..0000000
--- a/packages/select/index.bak.vue
+++ /dev/null
@@ -1,268 +0,0 @@
-<template>
-  <el-select
-    class="z-select"
-    :disabled="disabled"
-    :value-key="valueKey"
-    :filterable="filterable"
-    :remote="remote"
-    :reserve-keyword="reserveKeyword"
-    :clearable="clearable"
-    :placeholder="placeholder"
-    :remote-method="remoteMethod"
-    :loading="loading"
-    :size="size"
-    :multiple="multiple"
-    v-model="model"
-    v-on="bindEvents"
-    v-bind="selectProps"
-  >
-    <el-option v-for="item in optionsCurrent" :key="item.id" :label="labelFormat ? labelFormat(item) : item[labelKey]" :value="raw ? item : item[valueKey]" :disabled="item.disabled">
-      <slot :item="item" :value="model"></slot>
-    </el-option>
-    <slot name="empty" slot="empty"></slot>
-    <template slot="prefix">
-      <i v-if="initing" class="el-icon-loading"></i>
-      <slot v-else name="prefix"></slot>
-    </template>
-  </el-select>
-</template>
-
-<script>
-export default {
-  name: 'Select',
-  props: {
-    value: [String, Number, Boolean, Object, Array],
-    // 占位符
-    placeholder: {
-      type: String,
-      default: '请选择',
-    },
-    // 选项数组
-    options: {
-      type: Array,
-      default: () => [],
-    },
-    // 选中Label格式化方法
-    labelFormat: Function,
-    labelKey: {
-      type: String,
-      default: 'name',
-    },
-    valueKey: {
-      type: String,
-      default: 'code',
-    },
-    searchKey: {
-      type: String,
-      default: 'query',
-    },
-    size: {
-      type: String,
-      default: 'mini',
-    },
-    multiple: Boolean,
-    disabled: Boolean,
-    clearable: {
-      type: Boolean,
-      default: true,
-    },
-    filterable: {
-      type: Boolean,
-      default: true,
-    },
-    reserveKeyword: {
-      type: Boolean,
-      default: true,
-    },
-    selectProps: Object,
-    // 保持原值，即绑定值为对象
-    raw: Boolean,
-    // 远程搜索URL
-    url: String,
-    // HTTP请求库
-    http: Function,
-    // 请求参数
-    params: {
-      type: Object,
-      default: () => ({}),
-    },
-    // 请求配置
-    config: {
-      type: Object,
-      default: () => ({}),
-    },
-    // 自定义接口
-    queryApi: Function,
-    // 触发远程搜索的字段长度
-    triggerSize: {
-      type: Number,
-      default: 0,
-    },
-    auto: {
-      type: Boolean,
-      default: true,
-    },
-    update: Boolean,
-    updateOnce: Boolean,
-    beforeQuery: {
-      type: Function,
-      default: () => true,
-    },
-  },
-  data() {
-    return {
-      model: this.value,
-      optionsDataSource: this.fixOptions(this.options),
-      optionsCurrent: this.fixOptions(this.options),
-      loading: false,
-      initing: false,
-      loaded: false,
-    };
-  },
-  created() {
-    if (this.remote && this.auto) {
-      this.initing = true;
-      this.remoteMethod();
-    }
-  },
-  watch: {
-    value(val) {
-      this.model = val;
-    },
-    options(val) {
-      if (val) {
-        this.optionsCurrent = this.fixOptions(this.optionsDataSource);
-      }
-    },
-  },
-  computed: {
-    request() {
-      return this.http || this.zHttp;
-    },
-    remote() {
-      return Boolean(this.queryApi || (this.url && (this.http || this.zHttp)));
-    },
-    // Hack绑定事件，即令el-select组件绑定事件与当前z-select组件相同，且扩展部分事件返回值
-    bindEvents() {
-      let _events = {};
-      Object.keys(this.$listeners || {}).forEach(key => {
-        // 非绑定对象的情况下，通过change事件向上emit出当前选中项
-        if (key === 'change' && !this.raw) {
-          // 给el-select绑定change事件，且emit到z-select的change事件并拓展
-          _events[key] = value => {
-            this.$emit(
-              key,
-              value,
-              this.multiple
-                ? this.optionsCurrent.reduce((result, item) => {
-                    if (value.includes(item[this.valueKey])) {
-                      result.push(item);
-                    }
-                    return result;
-                  }, [])
-                : this.optionsCurrent.find(item => item[this.valueKey] === value),
-            );
-          };
-        } else {
-          _events[key] = e => {
-            this.$emit(key, e);
-          };
-        }
-      });
-      return {
-        ..._events,
-        'visible-change': show => {
-          if (this.remote && show) {
-            if (this.updateOnce) {
-              if (!this.loaded) {
-                this.remoteMethod();
-              }
-            } else if (this.update) {
-              this.remoteMethod();
-            }
-          }
-          _events['visible-change'] && _events['visible-change'](show);
-        },
-      };
-    },
-  },
-  methods: {
-    // 修复当前数据源包含当前选中项
-    fixOptions(list) {
-      let fixOptions = [];
-      if (this.raw) {
-        if (this.multiple) {
-          fixOptions = this.value && this.value.length > 0 ? [...this.value] : [];
-        } else {
-          fixOptions = this.value && Object.keys(this.value).length > 0 ? [this.value] : [];
-        }
-      }
-      let hash = {};
-      const options = [...fixOptions, ...this.options, ...list].reduce((result, item) => {
-        if (!hash[item[this.valueKey]]) {
-          // 如果当前元素的key值没有在hash对象里，则可放入最终结果数组
-          hash[item[this.valueKey]] = true; // 把当前元素key值添加到hash对象
-          item[this.valueKey] && item[this.labelKey] && result.push(item); // 把当前元素放入结果数组
-        }
-        return result; // 返回结果数组
-      }, []);
-      return options;
-    },
-    // 远程加载
-    remoteMethod(val = '') {
-      const searchText = val.trim();
-      const isQueryValid = this.beforeQuery(searchText);
-      if (isQueryValid) {
-        if (searchText.length >= this.triggerSize) {
-          this.loading = true;
-          let requestPrimise;
-          if (this.queryApi) {
-            requestPrimise = this.queryApi(searchText);
-          } else {
-            requestPrimise = this.request({
-              url: this.url,
-              method: 'get',
-              params: searchText ? { [this.searchKey]: searchText, ...this.params } : this.params,
-              ...this.config,
-            });
-          }
-          requestPrimise
-            .then(res => {
-              const response = res || {};
-              const options = this.fixOptions(response.result);
-              this.optionsDataSource = options;
-              this.optionsCurrent = options;
-            })
-            .finally(() => {
-              this.loading = false;
-              this.initing = false;
-              this.loaded = true;
-            });
-        } else {
-          this.optionsCurrent = this.optionsDataSource.filter(item => {
-            return item[this.labelKey].includes(val);
-          });
-        }
-      } else {
-        this.loading = false;
-        this.initing = false;
-        this.loaded = true;
-      }
-    },
-  },
-};
-</script>
-
-<style lang="scss">
-.z-select {
-  .el-input__prefix {
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    .el-icon-loading {
-      font-size: 16px;
-    }
-  }
-}
-</style>
diff --git a/packages/table/editable.vue b/packages/table/editable.vue
index 7163b24..431ff71 100644
--- a/packages/table/editable.vue
+++ b/packages/table/editable.vue
@@ -27,23 +27,26 @@
 </style>
 
 <template>
-  <el-table :data="tableData | tableDataFilter" :size="tableSize" v-bind="_props" @header-click="onHeaderClick" @cell-click="onCellClick" @cell-dblclick="onCellDblclick">
+  <el-table :data="tableData | tableDataFilter" :size="tableSize" v-bind="bindProps" @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 }">
+        <template #default="{ row, column, $index }">
           <cell-editor
-            :disabled="disabled || item.editable === false"
-            :editable="item.editable !== false && (row.$editable || (tableEditCell.index === row.$index && tableEditCell.prop === item.prop))"
+            :disabled="editall || disabled || item.editable === false"
+            :editable="editall || (item.editable !== false && row.$editor && row.$editor.includes(item.prop))"
             :component="item.component"
             :value="row[column.property]"
-            @input="onCellInput"
-            @edit-click="setEditCell(row, column)"
-            @edit-confirm="onEditConfirm"
+            @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 :name="`editor-${item.prop}`" :value="row[column.property]" :onInput="onCellInput"></slot>
+            <template v-if="$scopedSlots[`editor-${item.prop}`]" slot="editor">
+              <slot :name="`editor-${item.prop}`" :value="row[column.property]" :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>
           </cell-editor>
         </template>
@@ -72,7 +75,7 @@ export default {
       },
       watch: {
         editable(val) {
-          if (val && this.component === 'el-input') {
+          if (!this.disabled && val && this.component === 'el-input') {
             this.$nextTick(() => {
               this.$children[0] && this.$children[0].focus && this.$children[0].focus();
             });
@@ -91,8 +94,8 @@ export default {
               },
             }),
           ];
-          if (this.$scopedSlots.default) {
-            editorRender = [this.$scopedSlots.default()];
+          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) } })];
@@ -102,7 +105,10 @@ export default {
           }
           return h('span', { class: 'z-table-column__cell-editable' }, editorRender);
         }
-        const valueRender = [h('span', this.value)];
+        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') } }));
         }
@@ -123,6 +129,7 @@ export default {
         return [];
       },
     },
+    editall: Boolean,
     clickable: Boolean,
     disabled: Boolean,
     ...tableProps,
@@ -134,13 +141,13 @@ export default {
     data(val) {
       this.tableData = val || [];
     },
+    tableData(val) {
+      this.$emit('input', val || []);
+    },
   },
   data() {
     return {
       tableData: this.value,
-      tableRowTemplate: { $editable: true }, // 行数据模板
-      tableEditCell: {}, // 正在编辑的单元格
-      tableSelection: [], // 表格已选中
     };
   },
   filters: {
@@ -156,32 +163,51 @@ export default {
     },
     onCellClick(row, column) {
       if (this.clickable) {
-        if (row.$index !== this.tableEditCell.index || column.property !== this.tableEditCell.prop) {
-          this.tableEditCell = {};
-        }
+        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.setEditCell(row, column);
+        this.setRowEditor(row, column, row.$index);
       }
     },
-    setEditCell(row, column) {
-      this.tableEditCell = { index: row.$index, prop: column.property };
+    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) {
-      this.$emit('cell-edit-confirm', { ...this.tableEditCell, value });
+    onEditConfirm(value, row, column, index) {
+      this.$emit('cell-edit-confirm', { row, index, prop: column.property, value });
       this.cancelEditCell();
     },
     cancelEditCell() {
-      this.tableEditCell = {};
+      this.tableData = this.tableData.map((item, index) => {
+        const newItem = cloneDeep(item);
+        delete newItem.$index;
+        delete newItem.$editor;
+        return newItem;
+      });
     },
-    onCellInput(value) {
+    onCellInput(value, row, column, index) {
       const tableData = cloneDeep(this.tableData);
-      const tableRow = tableData[this.tableEditCell.index];
-      set(tableRow, this.tableEditCell.prop, value);
-      tableData[this.tableEditCell.index] = tableRow;
-      this.$set(this.tableData, this.tableEditCell.index, tableRow);
+      const tableRow = tableData[index];
+      set(tableRow, column.property, value);
+      tableData[index] = tableRow;
+      this.$set(this.tableData, index, tableRow);
     },
   },
 };
diff --git a/packages/table/index.js b/packages/table/index.js
index f2f38f6..6c45488 100644
--- a/packages/table/index.js
+++ b/packages/table/index.js
@@ -16,6 +16,7 @@ export default {
       },
     },
     editable: Boolean,
+    editall: Boolean,
     clickable: Boolean,
     disabled: Boolean,
     ...tableProps,
diff --git a/packages/table/normal.vue b/packages/table/normal.vue
index 467bd06..1a94b6a 100644
--- a/packages/table/normal.vue
+++ b/packages/table/normal.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-table :data="tableData" :size="tableSize" v-bind="_props">
+  <el-table :data="tableData" :size="tableSize" v-bind="bindProps">
     <slot name="left"></slot>
     <template v-for="(item, index) in columns">
       <el-table-column v-bind="item" :key="index">
@@ -7,6 +7,9 @@
         <template v-if="$scopedSlots[`cell-${item.prop}`]" #default="{ row, column, $index }">
           <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="row[item.prop]" :row="row" :column="column" :index="$index"></cell-render>
+        </template>
       </el-table-column>
     </template>
     <slot></slot>
@@ -19,6 +22,17 @@ import tableProps from './props';
 
 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: '',
@@ -62,6 +76,16 @@ export default {
     tableSize() {
       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;
+    },
   },
 };
 </script>
--
libgit2 0.21.0