From 21d9ec8dda6cd9e3a5ee6bdf265ec8f06b2b9d23 Mon Sep 17 00:00:00 2001
From: Aaron <427787340@qq.com>
Date: Wed, 28 Aug 2019 15:31:26 +0800
Subject: [PATCH] 更新Table文档

---
 examples/components/code-snippet.vue   |   1 +
 examples/views/docs/component/table.md | 175 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++----------------------------------------------------------------------
 packages/table/index.vue               |  18 +++++++++++++++---
 3 files changed, 121 insertions(+), 73 deletions(-)

diff --git a/examples/components/code-snippet.vue b/examples/components/code-snippet.vue
index 28b4b2f..4e98c6f 100644
--- a/examples/components/code-snippet.vue
+++ b/examples/components/code-snippet.vue
@@ -75,6 +75,7 @@ export default {
 
 .eagle-code-snippet--icon-code {
   cursor: pointer;
+  min-width: 18px;
   width: 18px;
   height: 18px;
   text-align: center;
diff --git a/examples/views/docs/component/table.md b/examples/views/docs/component/table.md
index 208c1dd..c5d42c4 100644
--- a/examples/views/docs/component/table.md
+++ b/examples/views/docs/component/table.md
@@ -1,16 +1,16 @@
 # Table 表格
 
-不同于常规Table组件，本组件采用配置列表的方式实现表格快速配置
+使用数据配置项列表快速生成一个表格
 
 ## 基础用法
 
-表格列可以通过`list`动态配置
+创建一个基础表格，配置项支持[el-table-column组件参数](https://element.eleme.cn/#/zh-CN/component/table#table-column-attributes)
 
-::: snippet 使用`list`属性设置数据源，每一项都已设置为**el-table-column**，数据源格式与`Form`相同
+::: snippet 使用`list`属性设置数据源，每一项都已设置为**el-table-column**
 
 ```html
 <template>
-  <eagle-table ref="table" :value="tableData" :list="tableList"></eagle-table>
+  <eagle-table :value="tableData" :list="list"></eagle-table>
 </template>
 
 <script>
@@ -18,35 +18,17 @@ export default {
   data() {
     return {
       tableData: [
-        { name: '项伯', address: '大楚小区', postcode: 555, postName: '哟哟哟', number: '北城1号院' },
-        { name: '项仲', address: '大楚小区', postcode: 555, postName: '哟哟哟', number: '北城2号院' },
-        { name: '项叔', address: '大楚小区', postcode: 555, postName: '哟哟哟', number: '北城3号院' },
-        { name: '项季', address: '大楚小区', postcode: 555, postName: '哟哟哟', number: '北城4号院' },
+        { name: '李云龙', age: 42, troopCode: 'DI', troopName: '独立团', position: '团长' },
+        { name: '赵刚', age: 30, troopCode: 'DI', troopName: '独立团', position: '政委' },
       ],
-      tableList: [
-        { key: 'name', label: '名称',
-          formatter(row, column) {
-            return `${row.name} - ${row.postcode}`;
-          }
-        },
-        { key: 'address', label: '住址' },
-        { key: 'postcode', agentKey: 'postName', label: '邮编' },
-        { key: 'number', label: '楼栋号', minWidth: '180' },
+      list: [
+        { key: 'name', label: '姓名' },
+        { key: 'age', label: '年龄', sortable: true },
+        { key: 'troopCode', agentKey: 'troopName', label: '部队番号', minWidth: 240 },
+        { key: 'position', label: '职务' },
       ]
     }
   },
-  mounted() {
-    console.log(this.$refs.table.instance);
-  },
-  methods: {
-    handleSubmit(value) {
-      console.log(value)
-    },
-    handleCancel() {
-      this.$refs.form.reset()
-      console.log('cancel!')
-    }
-  }
 }
 </script>
 ```
@@ -55,24 +37,19 @@ export default {
 
 ## 自定义列
 
-表格列可以通过`slot`动态配置，名称对应各列的列名
+在使用`list`的同时，也支持**表格列具名插槽**及**表格列值具名插槽**，以满足不同的业务需求
 
-::: snippet 可以使用`slot`加`slot-scope`的方式，新版vue可以使用`#slotname`的形式
+::: snippet 在组件内部通过具名插槽的方式，替换对应内容，**表格列具名插槽**格式为`key`，返回值为对应配置项所有参数；**表格列值具名插槽**格式为`value-key`，返回值为row、value、column、index及对应配置项所有参数。
 
 ```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>
+  <eagle-table :value="tableData" :list="list">
+    <template #value-age="{ value }">
+      <el-tag :type="value > 40 ? 'danger' : 'primary'">{{ value }}</el-tag>
+    </template>
+    <template #position>
+      <el-table-column prop="position" label="职务" min-width="200">
+        <el-tag type="success" slot-scope="{ row }">{{ row.position }}</el-tag>
       </el-table-column>
     </template>
   </eagle-table>
@@ -83,38 +60,90 @@ 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号院' },
+        { name: '李云龙', age: 42, troopCode: 'DI', troopName: '独立团', position: '团长' },
+        { name: '赵刚', age: 30, troopCode: 'DI', troopName: '独立团', position: '政委' },
       ],
-      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' },
+      list: [
+        { key: 'name', label: '姓名' },
+        { key: 'age', label: '年龄', sortable: true },
+        { key: 'troopCode', agentKey: 'troopName', label: '部队番号', minWidth: 240 },
+        { key: 'position', label: '职务' },
+        // { key: 'document', label: '档案', visible: (tableData) => tableData.filter(d => d.document).length > 0 },
       ]
     }
   },
-  mounted() {
-    console.log(this.$refs.table.instance);
+}
+</script>
+```
+
+:::
+
+## 首尾追加列
+
+一般情况下，会存在一些特殊的列必然位于首列或尾列，这时可以设置追加列，通常配合Scheme组件使用
+
+::: snippet 在表格中，可以使用**追加列具名插槽**进行表格列的追加，插槽有：尾列追加插槽`$append`、末尾插槽`$end`以及组件默认插槽被认为是首列追加插槽。
+
+```html
+<template>
+  <eagle-table :value="tableData" :list="list">
+    <el-table-column slot="$end" prop="operation" label="操作">
+      <el-button type="text">删除</el-button>
+    </el-table-column>
+    <el-table-column type="selection" min-width="40"></el-table-column>
+    <el-table-column prop="troopCode" label="部队编码"></el-table-column>
+    <el-table-column slot="$append" prop="file" label="附件"></el-table-column>
+  </eagle-table>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      tableData: [
+        { name: '李云龙', age: 42, troopCode: 'DI', troopName: '独立团', position: '团长', file: '履历' },
+        { name: '赵刚', age: 30, troopCode: 'DI', troopName: '独立团', position: '政委' },
+      ],
+      list: [
+        { key: 'name', label: '姓名' },
+        { key: 'age', label: '年龄' },
+      ]
+    }
   },
-  methods: {
-    handleSubmit(value) {
-      console.log(value)
-    },
-    handleCancel() {
-      this.$refs.form.reset()
-      console.log('cancel!')
+}
+</script>
+```
+
+:::
+
+## 动态列
+
+在特殊业务需求下，对于表格列的显示隐藏会有一些动态需求
+
+::: snippet 在表格列数据配置`list`属性中，使用`visible`作为列显示和隐藏的判断条件，支持**Boolean**和**Function**类型
+
+```html
+<template>
+  <eagle-table :value="tableData" :list="list"></eagle-table>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      tableData: [
+        { name: '李云龙', age: 42, troop: '独立团' },
+        { name: '赵刚', age: 30, troop: '独立团', position: '政委' },
+      ],
+      list: [
+        { key: 'name', label: '姓名' },
+        { key: 'age', label: '年龄' },
+        { key: 'troop', label: '部队番号', visible: false },
+        { key: 'position', label: '职务', visible: (tableData) => tableData.filter(d => d.position).length > 0 },
+        { key: 'document', label: '档案', visible: (tableData) => tableData.filter(d => d.document).length > 0 },
+      ]
     }
-  }
+  },
 }
 </script>
 ```
@@ -127,10 +156,15 @@ export default {
 
 参数|说明|类型|可选值|默认值
 -|-|-|-|-
+value / v-model |	表格数据 | Array | - | -
 list | 表单项配置列表 | Array | - | []
 tableProps | ElementUI表格属性 | Object | - | { size: 'small' }
 tableEvents | ElementUI表格事件 | Object | - | {}
 
+## Methods 方法
+
+可以通过引用`$ref`获取到el-table的实体对象`instance`，从而使用[el-table](https://element.eleme.cn/#/zh-CN/component/table#table-methods)的所有方法
+
 ## List 表单项配置列表
 
 配置方法与Form组件基本相同，有部分属性删减
@@ -139,4 +173,5 @@ tableEvents | ElementUI表格事件 | Object | - | {}
 -|-|-|-|-
 key | 参数名 | String | - | -
 label | 参数标签 | String | - | -
-其它参数 | ElementUI表格项的属性 | Any | - | -
\ No newline at end of file
+visible | 表格列显示状态 | Boolean,Function(tableData: array) | - | true
+其它参数 | [el-table-column组件参数](https://element.eleme.cn/#/zh-CN/component/table#table-column-attributes) | Any | - | -
\ No newline at end of file
diff --git a/packages/table/index.vue b/packages/table/index.vue
index 4c74e86..43bbfed 100644
--- a/packages/table/index.vue
+++ b/packages/table/index.vue
@@ -9,8 +9,13 @@
     <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.agentKey || item.key" :key="index" :min-width="item.minWidth || '120'"></el-table-column>
+        <template v-if="bindItemVisible(item.visible)">
+          <slot v-if="$scopedSlots[item.key] || $slots[item.key]" :name="item.key" v-bind="item"></slot>
+          <el-table-column v-else-if="$scopedSlots[`value-${item.key}`] || $slots[`value-${item.key}`]" v-bind="item" :prop="item.agentKey || item.key" :key="index" :min-width="item.minWidth || '120'">
+            <slot slot-scope="{ row, column, $index }" :name="`value-${item.key}`" v-bind="item" :row="row" :value="row[item.key]" :column="column" :index="$index"></slot>
+          </el-table-column>
+          <el-table-column v-else v-bind="item" :prop="item.agentKey || item.key" :key="index" :min-width="item.minWidth || '120'"></el-table-column>
+        </template>
       </template>
     </template>
     <slot name="$append"></slot>
@@ -61,7 +66,14 @@ export default {
     };
   },
   methods: {
-
+    // 绑定表格列显示隐藏状态
+    bindItemVisible(visible = true) {
+      let result = visible;
+      if (typeof visible === 'function') {
+        result = visible(this.tableData);
+      }
+      return result;
+    },
   }
 };
 </script>
\ No newline at end of file
--
libgit2 0.21.0