From 3b6c0c2778eb8c3b353a65e4fff4e59b1218f66c Mon Sep 17 00:00:00 2001
From: Aaron <427787340@qq.com>
Date: Tue, 23 Jul 2019 11:35:04 +0800
Subject: [PATCH] 新增Table组件

---
 examples/router/routes.js    |  6 ++++++
 examples/views/docs/form.md  |  1 +
 examples/views/docs/table.md | 90 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 packages/form/index.vue      | 12 +++++++++---
 packages/index.js            |  2 ++
 packages/table/index.vue     | 69 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 6 files changed, 177 insertions(+), 3 deletions(-)
 create mode 100644 examples/views/docs/table.md
 create mode 100644 packages/table/index.vue

diff --git a/examples/router/routes.js b/examples/router/routes.js
index 2b33b78..31a4147 100644
--- a/examples/router/routes.js
+++ b/examples/router/routes.js
@@ -24,6 +24,12 @@ const _components = [
         meta: { title: 'Form 表单' },
         component: () => import('@/views/docs/form.md'),
       },
+      {
+        path: 'table',
+        name: 'table',
+        meta: { title: 'Table 表格' },
+        component: () => import('@/views/docs/table.md'),
+      },
     ]
   }
 ]
diff --git a/examples/views/docs/form.md b/examples/views/docs/form.md
index dfd4c0d..4d6aee3 100644
--- a/examples/views/docs/form.md
+++ b/examples/views/docs/form.md
@@ -57,6 +57,7 @@ export default {
     return {
       formList: [
         { type: 'el-input', key: 'name', label: '名称', rules: [{ required: true, message: '请输入名称' }] },
+        { type: 'el-input', key: 'gender', label: '性别', group: { label: '身体状况', icon: 'edit' } },
         { type: 'eagle-select', key: 'address', label: '住址', props: { dataSource: [{ label: '大街上', value: 'S' }, { label: '小区里', value: 'H' }] }, group: '详细地址' },
         { type: 'el-input', key: 'postcode', label: '邮编', tip: { content: '邮政编码', placement: "left" }, group: '详细地址' },
         { type: 'el-input', key: 'number', label: '楼栋号', group: '详细地址' },
diff --git a/examples/views/docs/table.md b/examples/views/docs/table.md
new file mode 100644
index 0000000..0d2aa03
--- /dev/null
+++ b/examples/views/docs/table.md
@@ -0,0 +1,90 @@
+# Table 表格
+
+不同于常规Table组件，本组件采用配置列表的方式实现表格快速配置
+
+## 基础用法
+
+表格列可以通过`list`动态配置
+
+:::snippet 使用`list`属性设置数据源，每一项都已设置为**el-table-column**，数据源格式与`Form`相同
+
+```html
+<template>
+  <eagle-table ref="table" :value="tableData" :list="tableList" :tableProps="tableProps">
+    <el-table-column type="selection" width="55"></el-table-column>
+    <el-table-column type="index" width="50"></el-table-column>
+    <template #postcode="{ label, key }">
+      <el-table-column prop="postcode" label="家属院" min-width="200">
+        <template slot-scope="{ row: { postcode, number }, $index }"> <!-- 由于渲染问题，这里没有显示出来  -->
+          <span style="color: orange">{{ $index }}</span>
+          <span style="color: blue">{{ label }}</span>
+          <span style="color: red">{{ key }}</span>
+          <span>{{ number }}</span>
+          <span>{{ postcode }}</span>
+        </template>
+      </el-table-column>
+    </template>
+  </eagle-table>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      tableData: [
+        { name: '项伯', address: '大楚小区', postcode: 555, number: '北城1号院' },
+        { name: '项仲', address: '大楚小区', postcode: 555, number: '北城2号院' },
+        { name: '项叔', address: '大楚小区', postcode: 555, number: '北城3号院' },
+        { name: '项季', address: '大楚小区', postcode: 555, number: '北城4号院' },
+      ],
+      tableProps: {
+        border: true
+      },
+      tableList: [
+        { key: 'name', label: '名称',
+          formatter(row, column) {
+            return `${row.name} - ${row.postcode}`;
+          }
+        },
+        { key: 'address', label: '住址' },
+        { key: 'postcode', label: '邮编' },
+        { key: 'number', label: '楼栋号', minWidth: '180' },
+      ]
+    }
+  },
+  mounted() {
+    console.log(this.$refs.table.tableInstance);
+  },
+  methods: {
+    handleSubmit(value) {
+      console.log(value)
+    },
+    handleCancel() {
+      this.$refs.form.reset()
+      console.log('cancel!')
+    }
+  }
+}
+</script>
+```
+
+:::
+
+
+## Attribute 属性
+
+参数|说明|类型|可选值|默认值
+-|-|-|-|-
+list | 表单项配置列表 | Array | - | []
+tableProps | ElementUI表格属性 | Object | - | { size: 'small' }
+tableEvents | ElementUI表格事件 | Object | - | {}
+
+## List 表单项配置列表
+
+配置方法与Form组件基本相同，有部分属性删减
+
+参数|说明|类型|可选值|默认值
+-|-|-|-|-
+key | 参数名 | String | - | -
+label | 参数标签 | String | - | -
+其它参数 | ElementUI表格项的属性 | Any | - | -
\ No newline at end of file
diff --git a/packages/form/index.vue b/packages/form/index.vue
index 07f37e3..5757ad2 100644
--- a/packages/form/index.vue
+++ b/packages/form/index.vue
@@ -8,6 +8,9 @@
   border-bottom: 1px solid #d9d9d9;
   margin-bottom: 30px;
 }
+.eagle-form__group-icon {
+  padding-right: 10px;
+}
 .eagle-form__group-content {
   margin: 15px 0px;
 }
@@ -19,7 +22,10 @@
       <template v-for="(data, index) in listOption.dataList">
         <template v-if="listOption.isGroup">
           <slot v-if="$scopedSlots[data.key] || $slots[data.key]" :name="data.key" v-bind="data"></slot>
-          <el-col v-else class="eagle-form__group-title" :key="data.key" :span="24">{{ data.label }}</el-col>
+          <el-col v-else class="eagle-form__group-title" :key="data.key" :span="24">
+            <i v-if="data.icon" :class="`el-icon-${data.icon} eagle-form__group-icon`"></i>
+            <span>{{ data.label }}</span>
+          </el-col>
         </template>
         <el-row :class="{ 'eagle-form__group-content': listOption.isGroup }" :key="'group-content-' + index" :gutter="15">
           <template v-for="(item, index) in data.list">
@@ -95,7 +101,7 @@ export default {
         this.model[key] = val ? val[key] : undefined;
       });
     },
-    // 配置列表又改动时初始化表单模型
+    // 配置列表有改动时初始化表单模型
     list(value) {
       this.initModel(value);
     },
@@ -124,7 +130,7 @@ export default {
           if (typeof data.group === 'object') {
             if (!groupSet[`group-${data.group.key}`]) {
               groupSet[`group-${data.group.key}`] = {
-                label: data.group.label,
+                ...data.group,
                 list: []
               };
             }
diff --git a/packages/index.js b/packages/index.js
index 969b75d..af4aaf9 100644
--- a/packages/index.js
+++ b/packages/index.js
@@ -11,6 +11,7 @@ import RadioGroup from './radio-group'
 import Select from './select'
 import StatusIndicator from './status-indicator'
 import SwitchButton from './switch-button'
+import Table from './table'
 import TreeSelect from './tree-select'
 
 const components = {
@@ -27,6 +28,7 @@ const components = {
   Select,
   StatusIndicator,
   SwitchButton,
+  Table,
   TreeSelect
 }
 
diff --git a/packages/table/index.vue b/packages/table/index.vue
new file mode 100644
index 0000000..e1700bd
--- /dev/null
+++ b/packages/table/index.vue
@@ -0,0 +1,69 @@
+<style>
+.eagle-table {
+  width: 100%;
+}
+</style>
+
+<template>
+  <el-table class="eagle-table" ref="table" :data="tableData" v-bind="tableProps" v-on="tableEvents">
+    <slot></slot>
+    <template v-if="list && list.length > 0">
+      <template v-for="(item, index) in list">
+        <slot v-if="$scopedSlots[item.key] || $slots[item.key]" :name="item.key" v-bind="item" :row="item"></slot>
+        <el-table-column v-else v-bind="item" :prop="item.key" :key="index" :min-width="item.minWidth || '120'"></el-table-column>
+      </template>
+    </template>
+  </el-table>
+</template>
+
+<script>
+export default {
+  name: 'Table',
+  props: {
+    // 用于实例化本组件绑定v-model的值
+    value: Array,
+    // 配置列表
+    list: {
+      type: Array,
+      required: true
+    },
+    // 表格参数
+    tableProps: {
+      type: Object,
+      default() {
+        return {
+          size: 'small',
+        }
+      }
+    },
+    // 表格事件
+    tableEvents: Object,
+  },
+  watch: {
+    // 组件外部v-model值更新后同步刷新model
+    value(val) {
+      this.tableData = val || [];
+    },
+  },
+  mounted() {
+    this.tableData = this.value || [];
+  },
+  computed: {
+    // 表格实体
+    tableInstance: {
+      get() {
+        return this.$refs.table;
+      }
+    }
+  },
+  data() {
+    return {
+      // 表格数据
+      tableData: [],
+    };
+  },
+  methods: {
+
+  }
+};
+</script>
\ No newline at end of file
--
libgit2 0.21.0