From 8657d1e91433c9104dd0fa5377c4c690c4a36978 Mon Sep 17 00:00:00 2001
From: 刘汉宸 <liuhanchen@zeyihuoyun.com>
Date: Mon, 22 Feb 2021 13:16:29 +0800
Subject: [PATCH] feat: 新增Table组件

---
 examples/router/routes.js               |  11 +++++++++++
 examples/views/docs/component/form.md   |   6 +++---
 examples/views/docs/component/select.md |  86 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++---
 examples/views/docs/component/table.md  |  79 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 packages/index.js                       |   6 ++++++
 packages/table/editable.vue             | 106 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 packages/table/index.js                 |  28 ++++++++++++++++++++++++++++
 packages/table/normal.vue               |  36 ++++++++++++++++++++++++++++++++++++
 packages/table/props.js                 |  62 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 9 files changed, 414 insertions(+), 6 deletions(-)
 create mode 100644 examples/views/docs/component/table.md
 create mode 100644 packages/table/editable.vue
 create mode 100644 packages/table/index.js
 create mode 100644 packages/table/normal.vue
 create mode 100644 packages/table/props.js

diff --git a/examples/router/routes.js b/examples/router/routes.js
index c224252..6e25762 100644
--- a/examples/router/routes.js
+++ b/examples/router/routes.js
@@ -57,6 +57,17 @@ const _components = [
     ],
   },
   {
+    group: '展示组件',
+    children: [
+      {
+        path: 'table',
+        name: 'table',
+        meta: { title: 'Table 表格' },
+        component: () => import('@/views/docs/component/table.md'),
+      },
+    ],
+  },
+  {
     group: '方案组件',
     children: [
       {
diff --git a/examples/views/docs/component/form.md b/examples/views/docs/component/form.md
index d768318..b7edc92 100644
--- a/examples/views/docs/component/form.md
+++ b/examples/views/docs/component/form.md
@@ -115,9 +115,9 @@ export default {
 ```html
 <template>
   <z-form label-width="100px" size="mini" span="8">
-    <z-form-item label="户主姓名" v-model="model.name" required></z-form-item>
-    <z-form-item label="年龄" v-model="model.age"></z-form-item>
-    <z-form-item label="性别" v-model="model.gender"></z-form-item>
+    <z-form-item label="户主姓名" :value="model.name" required></z-form-item>
+    <z-form-item label="年龄" :value="model.age"></z-form-item>
+    <z-form-item label="性别" :value="model.gender"></z-form-item>
     <z-form-item label="详细地址" span="24">
       <el-tag size="mini" type="info">{{ model.address }}</el-tag>
       <template #label>
diff --git a/examples/views/docs/component/select.md b/examples/views/docs/component/select.md
index ee01b5a..c51f72f 100644
--- a/examples/views/docs/component/select.md
+++ b/examples/views/docs/component/select.md
@@ -144,6 +144,37 @@ export default {
 
 </div>
 
+## 绑定值参数名
+
+可以根据不同业务数据的需要，自定义下拉框的绑定值参数名。
+
+::: snippet `labelKey`设置下拉框显示的文本，默认**label**；`valueKey`设置下拉框选项对应的值，默认**value**。
+
+```html
+<template>
+  <div>
+    <z-select v-model="model" :options="options" label-key="name" value-key="code"></z-select>
+    <span>{{ model }}</span>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      model: '',
+      options: [
+        { name: '单车', code: 'VAN' },
+        { name: '牵引车', code: 'TRACTOR' }
+      ],
+    }
+  } 
+}
+</script>
+```
+
+:::
+
 ## 设置多选
 
 多选时支持字符串或数组类型的值
@@ -242,7 +273,7 @@ export default {
 
 ## 远程加载
 
-可以通过设置`queryApi`自定义查询接口，也可以设置`url`及`http`进行内置格式的查询，其中`http`可在组件库全局配置
+可以通过设置`queryApi`自定义查询接口，必须是返回`Promise`的`Function`类型，Promise的返回值为`Array`类型，格式需要与`lebalKey`、`valueKey`项对应。
 
 <div class="code-snippet-box">
 
@@ -269,6 +300,9 @@ export default {
   },
   methods: {
     queryAPI(val) {
+      // 正式项目使用时，可以返回axios的实例，如：
+      // return this.$axios({ url: 'xxx', params: { foo: 'bar' } }).then(response => ({ result: response.result }));
+      // 此处的Promise是模拟接口
       return new Promise(resolve => {
         setTimeout(() => {
           resolve({
@@ -375,6 +409,52 @@ export default {
 
 </div>
 
+## 搜索前校验
+
+可以通过设置`before-query`设置搜索之前的钩子，若为返回值为**false**则不执行搜索。
+
+::: snippet 一般用于搜索前的业务逻辑校验
+
+```html
+<template>
+  <z-select v-model="model" :options="options" :queryApi="queryAPI" :before-query="beforeQuery"></z-select>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      model: '',
+      options: [
+        { label: '王七', value: 'wq' },
+        { label: '陈拾', value: 'cs' },
+      ]
+    }
+  },
+  methods: {
+    beforeQuery(query) {
+      console.log(query.length);
+      return query.length > 2;
+    },
+    queryAPI(val) {
+      return new Promise(resolve => {
+        setTimeout(() => {
+          resolve({
+            result: [
+              { label: '王五', value: 'ww' },
+              { label: '赵六', value: 'zl' },
+            ]
+          });
+        }, 1000);
+      });
+    },
+  }
+}
+</script>
+```
+
+:::
+
 ## API
 
 ## Attribute 属性
@@ -384,8 +464,8 @@ export default {
 value | 值 | String, Number, Boolean, Object, Array | - | -
 placeholder | 占位符 | String | - | 请选择
 options | 选项列表 | Array | - | []
-labelKey | 标签字段名 | String | - | name
-valueKey | 值字段名 | String | - | code
+labelKey | 标签字段名 | String | - | label
+valueKey | 值字段名 | String | - | value
 searchKey | 搜索字段名 | String | - | query
 size | 大小 | String | mini、small、large | mini
 multiple | 多选 | Boolean | - | false
diff --git a/examples/views/docs/component/table.md b/examples/views/docs/component/table.md
new file mode 100644
index 0000000..2d2fc14
--- /dev/null
+++ b/examples/views/docs/component/table.md
@@ -0,0 +1,79 @@
+# Table 表格
+
+拓展ElementUI的`el-table`
+
+## 基础用法
+
+基本参数与ElementUI的`el-table`相同。
+
+::: snippet 支持`size`继承
+
+```html
+<template>
+  <el-form size="mini">
+    <z-table :data="tableData" border>
+      <el-table-column prop="name" label="姓名"></el-table-column>
+      <el-table-column prop="age" label="年龄"></el-table-column>
+      <el-table-column prop="gender" label="性别"></el-table-column>
+    </z-table>
+  </el-form>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      tableData: [
+        { name: '张三', age: '31', gender: '男' },
+        { name: '李四', age: '27', gender: '女' },
+        { name: '王五', age: '16', gender: '男' },
+      ],
+    };
+  },
+}
+</script>
+```
+
+:::
+
+## 可编辑表格
+
+一般用于表格的静态数据编辑
+
+::: snippet 设置type为`editable`开启可编辑模式
+
+```html
+<template>
+  <el-form size="mini">
+    <el-row>
+      <el-col :span="18">
+        <z-table :value="tableData" type="editable" border :columns="columns"></z-table>
+      </el-col>
+      <el-col :span="6" style="padding-left: 10px">
+        <pre class="demo-model">{{ tableData }}</pre>
+      </el-col>
+    </el-row>
+  </el-form>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      tableData: [
+        { name: '张三', age: '31', gender: '男' },
+        { name: '李四', age: '27', gender: '女' },
+        { name: '王五', age: '16', gender: '男' },
+      ],
+      columns: [
+        { prop: 'name', label: '姓名' },
+        { type: 'el-input-number', prop: 'age', label: '年龄' },
+        { prop: 'gender', label: '性别' },
+      ]
+    };
+  },
+}
+</script>
+```
+
+:::
\ No newline at end of file
diff --git a/packages/index.js b/packages/index.js
index 5da91f6..5b4d48a 100644
--- a/packages/index.js
+++ b/packages/index.js
@@ -1,4 +1,7 @@
 import Vue from 'vue';
+import ZTable from './table/index';
+import ZTableNormal from './table/normal';
+import ZTableEditable from './table/editable';
 import ElImageViewer from './upload/image-viewer';
 
 let components = {};
@@ -11,6 +14,9 @@ componentsFiles.keys().forEach(path => {
 
 // 给组件库配置install方法
 const install = function(Vue, opts = {}) {
+  components[ZTable.name] = ZTable;
+  components[ZTableNormal.name] = ZTableNormal;
+  components[ZTableEditable.name] = ZTableEditable;
   Object.values(components).forEach(component => {
     // 组件前缀
     const prefix = opts.name || 'z';
diff --git a/packages/table/editable.vue b/packages/table/editable.vue
new file mode 100644
index 0000000..ed35907
--- /dev/null
+++ b/packages/table/editable.vue
@@ -0,0 +1,106 @@
+<template>
+  <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 #default="{ row, column }">
+          <table-column-cell
+            :editable="row.$editable || (tableEditCell.index === row.$index && tableEditCell.prop === item.prop)"
+            :type="item.type"
+            :value="row[column.property]"
+            @input="onCellInput"
+          ></table-column-cell>
+        </template>
+      </el-table-column>
+    </template>
+  </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: {
+    tableColumnCell: {
+      props: {
+        value: [String, Number, Array, Object],
+        type: { type: String, default: 'el-input' },
+        editable: Boolean,
+      },
+      watch: {
+        editable(val) {
+          if (val && this.type === 'el-input') {
+            this.$nextTick(() => {
+              this.$children[0].focus();
+            });
+          }
+        },
+      },
+      render(h) {
+        if (this.editable) {
+          return h(this.type, {
+            props: { value: this.value, size: 'mini' },
+            on: {
+              input: value => {
+                this.$emit('input', value);
+              },
+            },
+          });
+        }
+        return h('span', this.value);
+      },
+    },
+  },
+  props: {
+    value: {
+      type: Array,
+      default() {
+        return [];
+      },
+    },
+    columns: {
+      type: Array,
+      default() {
+        return [];
+      },
+    },
+    ...tableProps,
+  },
+  data() {
+    return {
+      tableData: this.value,
+      tableRowTemplate: { $editable: true }, // 行数据模板
+      tableEditCell: {}, // 正在编辑的单元格
+      tableSelection: [], // 表格已选中
+    };
+  },
+  filters: {
+    tableDataFilter(value) {
+      return value.map((item, index) => ({ ...item, $index: index }));
+    },
+  },
+  methods: {
+    onHeaderClick() {
+      this.tableEditCell = {};
+    },
+    onCellClick(row, column, cell, event) {
+      if (row.$index !== this.tableEditCell.index || column.property !== this.tableEditCell.prop) {
+        this.tableEditCell = {};
+      }
+    },
+    onCellDblclick(row, column, cell, event) {
+      this.tableEditCell = { index: row.$index, prop: column.property };
+    },
+    onCellInput(value) {
+      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);
+    },
+  },
+};
+</script>
diff --git a/packages/table/index.js b/packages/table/index.js
new file mode 100644
index 0000000..4a02ac3
--- /dev/null
+++ b/packages/table/index.js
@@ -0,0 +1,28 @@
+import tableProps from './props';
+
+export default {
+  name: 'Table',
+  props: {
+    type: {
+      type: String,
+      default: 'normal',
+    },
+    value: {
+      type: Array,
+      default() {
+        return [];
+      },
+    },
+    columns: {
+      type: Array,
+      default() {
+        return [];
+      },
+    },
+    ...tableProps,
+  },
+  render(h) {
+    const scopedSlots = this.$scopedSlots;
+    return h(`z-table-${this.type}`, { props: { ...this._props }, scopedSlots });
+  },
+};
diff --git a/packages/table/normal.vue b/packages/table/normal.vue
new file mode 100644
index 0000000..854cef2
--- /dev/null
+++ b/packages/table/normal.vue
@@ -0,0 +1,36 @@
+<template>
+  <el-table :size="tableSize" v-bind="_props">
+    <slot></slot>
+    <slot name="append"></slot>
+  </el-table>
+</template>
+
+<script>
+import tableProps from './props';
+
+export default {
+  name: 'TableNormal',
+  inject: {
+    elForm: {
+      default: '',
+    },
+    elFormItem: {
+      default: '',
+    },
+  },
+  props: {
+    ...tableProps,
+  },
+  computed: {
+    _elFormItemSize() {
+      return (this.elFormItem || {}).elFormItemSize;
+    },
+    tableSize() {
+      return this.size || this._elFormItemSize || (this.elForm || {}).size || (this.$ELEMENT || {}).size;
+    },
+  },
+  mounted() {
+    // console.log(this);
+  },
+};
+</script>
diff --git a/packages/table/props.js b/packages/table/props.js
new file mode 100644
index 0000000..7ea8926
--- /dev/null
+++ b/packages/table/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,
+};
--
libgit2 0.21.0