framework / eagle-web-toolkit

Download as
Browse Code »

Commit 21d9ec8dda6cd9e3a5ee6bdf265ec8f06b2b9d23

Authored by Aaron
1 parent 739ee90b
Exists in master and in 1 other branch legacy

更新Table文档

Showing 3 changed files with 121 additions and 73 deletions   Show diff stats
examples/components/code-snippet.vue
  Diff comments   View file @21d9ec8
... ... @@ -75,6 +75,7 @@ export default {
75 75  
76 76 .eagle-code-snippet--icon-code {
77 77 cursor: pointer;
  78 + min-width: 18px;
78 79 width: 18px;
79 80 height: 18px;
80 81 text-align: center;
... ...
examples/views/docs/component/table.md
  Diff comments   View file @21d9ec8
1 1 # Table 表格
2 2  
3   -不同于常规Table组件，本组件采用配置列表的方式实现表格快速配置
  3 +使用数据配置项列表快速生成一个表格
4 4  
5 5 ## 基础用法
6 6  
7   -表格列可以通过`list`动态配置
  7 +创建一个基础表格，配置项支持[el-table-column组件参数](https://element.eleme.cn/#/zh-CN/component/table#table-column-attributes)
8 8  
9   -::: snippet 使用`list`属性设置数据源，每一项都已设置为**el-table-column**，数据源格式与`Form`相同
  9 +::: snippet 使用`list`属性设置数据源，每一项都已设置为**el-table-column**
10 10  
11 11 ```html
12 12 <template>
13   - <eagle-table ref="table" :value="tableData" :list="tableList"></eagle-table>
  13 + <eagle-table :value="tableData" :list="list"></eagle-table>
14 14 </template>
15 15  
16 16 <script>
... ... @@ -18,35 +18,17 @@ export default {
18 18 data() {
19 19 return {
20 20 tableData: [
21   - { name: '项伯', address: '大楚小区', postcode: 555, postName: '哟哟哟', number: '北城1号院' },
22   - { name: '项仲', address: '大楚小区', postcode: 555, postName: '哟哟哟', number: '北城2号院' },
23   - { name: '项叔', address: '大楚小区', postcode: 555, postName: '哟哟哟', number: '北城3号院' },
24   - { name: '项季', address: '大楚小区', postcode: 555, postName: '哟哟哟', number: '北城4号院' },
  21 + { name: '李云龙', age: 42, troopCode: 'DI', troopName: '独立团', position: '团长' },
  22 + { name: '赵刚', age: 30, troopCode: 'DI', troopName: '独立团', position: '政委' },
25 23 ],
26   - tableList: [
27   - { key: 'name', label: '名称',
28   - formatter(row, column) {
29   - return `${row.name} - ${row.postcode}`;
30   - }
31   - },
32   - { key: 'address', label: '住址' },
33   - { key: 'postcode', agentKey: 'postName', label: '邮编' },
34   - { key: 'number', label: '楼栋号', minWidth: '180' },
  24 + list: [
  25 + { key: 'name', label: '姓名' },
  26 + { key: 'age', label: '年龄', sortable: true },
  27 + { key: 'troopCode', agentKey: 'troopName', label: '部队番号', minWidth: 240 },
  28 + { key: 'position', label: '职务' },
35 29 ]
36 30 }
37 31 },
38   - mounted() {
39   - console.log(this.$refs.table.instance);
40   - },
41   - methods: {
42   - handleSubmit(value) {
43   - console.log(value)
44   - },
45   - handleCancel() {
46   - this.$refs.form.reset()
47   - console.log('cancel!')
48   - }
49   - }
50 32 }
51 33 </script>
52 34 ```
... ... @@ -55,24 +37,19 @@ export default {
55 37  
56 38 ## 自定义列
57 39  
58   -表格列可以通过`slot`动态配置，名称对应各列的列名
  40 +在使用`list`的同时，也支持**表格列具名插槽**及**表格列值具名插槽**，以满足不同的业务需求
59 41  
60   -::: snippet 可以使用`slot`加`slot-scope`的方式，新版vue可以使用`#slotname`的形式
  42 +::: snippet 在组件内部通过具名插槽的方式，替换对应内容，**表格列具名插槽**格式为`key`，返回值为对应配置项所有参数；**表格列值具名插槽**格式为`value-key`，返回值为row、value、column、index及对应配置项所有参数。
61 43  
62 44 ```html
63 45 <template>
64   - <eagle-table ref="table" :value="tableData" :list="tableList" :tableProps="tableProps">
65   - <el-table-column type="selection" width="55"></el-table-column>
66   - <el-table-column type="index" width="50"></el-table-column>
67   - <template #postcode="{ label, key }">
68   - <el-table-column prop="postcode" label="家属院" min-width="200">
69   - <template slot-scope="{ row: { postcode, number }, $index }"> <!-- 由于渲染问题，这里没有显示出来 -->
70   - <span style="color: orange">{{ $index }}</span>
71   - <span style="color: blue">{{ label }}</span>
72   - <span style="color: red">{{ key }}</span>
73   - <span>{{ number }}</span>
74   - <span>{{ postcode }}</span>
75   - </template>
  46 + <eagle-table :value="tableData" :list="list">
  47 + <template #value-age="{ value }">
  48 + <el-tag :type="value > 40 ? 'danger' : 'primary'">{{ value }}</el-tag>
  49 + </template>
  50 + <template #position>
  51 + <el-table-column prop="position" label="职务" min-width="200">
  52 + <el-tag type="success" slot-scope="{ row }">{{ row.position }}</el-tag>
76 53 </el-table-column>
77 54 </template>
78 55 </eagle-table>
... ... @@ -83,38 +60,90 @@ export default {
83 60 data() {
84 61 return {
85 62 tableData: [
86   - { name: '项伯', address: '大楚小区', postcode: 555, number: '北城1号院' },
87   - { name: '项仲', address: '大楚小区', postcode: 555, number: '北城2号院' },
88   - { name: '项叔', address: '大楚小区', postcode: 555, number: '北城3号院' },
89   - { name: '项季', address: '大楚小区', postcode: 555, number: '北城4号院' },
  63 + { name: '李云龙', age: 42, troopCode: 'DI', troopName: '独立团', position: '团长' },
  64 + { name: '赵刚', age: 30, troopCode: 'DI', troopName: '独立团', position: '政委' },
90 65 ],
91   - tableProps: {
92   - border: true
93   - },
94   - tableList: [
95   - { key: 'name', label: '名称',
96   - formatter(row, column) {
97   - return `${row.name} - ${row.postcode}`;
98   - }
99   - },
100   - { key: 'address', label: '住址' },
101   - { key: 'postcode', label: '邮编' },
102   - { key: 'number', label: '楼栋号', minWidth: '180' },
  66 + list: [
  67 + { key: 'name', label: '姓名' },
  68 + { key: 'age', label: '年龄', sortable: true },
  69 + { key: 'troopCode', agentKey: 'troopName', label: '部队番号', minWidth: 240 },
  70 + { key: 'position', label: '职务' },
  71 + // { key: 'document', label: '档案', visible: (tableData) => tableData.filter(d => d.document).length > 0 },
103 72 ]
104 73 }
105 74 },
106   - mounted() {
107   - console.log(this.$refs.table.instance);
  75 +}
  76 +</script>
  77 +```
  78 +
  79 +:::
  80 +
  81 +## 首尾追加列
  82 +
  83 +一般情况下，会存在一些特殊的列必然位于首列或尾列，这时可以设置追加列，通常配合Scheme组件使用
  84 +
  85 +::: snippet 在表格中，可以使用**追加列具名插槽**进行表格列的追加，插槽有：尾列追加插槽`$append`、末尾插槽`$end`以及组件默认插槽被认为是首列追加插槽。
  86 +
  87 +```html
  88 +<template>
  89 + <eagle-table :value="tableData" :list="list">
  90 + <el-table-column slot="$end" prop="operation" label="操作">
  91 + <el-button type="text">删除</el-button>
  92 + </el-table-column>
  93 + <el-table-column type="selection" min-width="40"></el-table-column>
  94 + <el-table-column prop="troopCode" label="部队编码"></el-table-column>
  95 + <el-table-column slot="$append" prop="file" label="附件"></el-table-column>
  96 + </eagle-table>
  97 +</template>
  98 +
  99 +<script>
  100 +export default {
  101 + data() {
  102 + return {
  103 + tableData: [
  104 + { name: '李云龙', age: 42, troopCode: 'DI', troopName: '独立团', position: '团长', file: '履历' },
  105 + { name: '赵刚', age: 30, troopCode: 'DI', troopName: '独立团', position: '政委' },
  106 + ],
  107 + list: [
  108 + { key: 'name', label: '姓名' },
  109 + { key: 'age', label: '年龄' },
  110 + ]
  111 + }
108 112 },
109   - methods: {
110   - handleSubmit(value) {
111   - console.log(value)
112   - },
113   - handleCancel() {
114   - this.$refs.form.reset()
115   - console.log('cancel!')
  113 +}
  114 +</script>
  115 +```
  116 +
  117 +:::
  118 +
  119 +## 动态列
  120 +
  121 +在特殊业务需求下，对于表格列的显示隐藏会有一些动态需求
  122 +
  123 +::: snippet 在表格列数据配置`list`属性中，使用`visible`作为列显示和隐藏的判断条件，支持**Boolean**和**Function**类型
  124 +
  125 +```html
  126 +<template>
  127 + <eagle-table :value="tableData" :list="list"></eagle-table>
  128 +</template>
  129 +
  130 +<script>
  131 +export default {
  132 + data() {
  133 + return {
  134 + tableData: [
  135 + { name: '李云龙', age: 42, troop: '独立团' },
  136 + { name: '赵刚', age: 30, troop: '独立团', position: '政委' },
  137 + ],
  138 + list: [
  139 + { key: 'name', label: '姓名' },
  140 + { key: 'age', label: '年龄' },
  141 + { key: 'troop', label: '部队番号', visible: false },
  142 + { key: 'position', label: '职务', visible: (tableData) => tableData.filter(d => d.position).length > 0 },
  143 + { key: 'document', label: '档案', visible: (tableData) => tableData.filter(d => d.document).length > 0 },
  144 + ]
116 145 }
117   - }
  146 + },
118 147 }
119 148 </script>
120 149 ```
... ... @@ -127,10 +156,15 @@ export default {
127 156  
128 157 参数|说明|类型|可选值|默认值
129 158 -|-|-|-|-
  159 +value / v-model | 表格数据 | Array | - | -
130 160 list | 表单项配置列表 | Array | - | []
131 161 tableProps | ElementUI表格属性 | Object | - | { size: 'small' }
132 162 tableEvents | ElementUI表格事件 | Object | - | {}
133 163  
  164 +## Methods 方法
  165 +
  166 +可以通过引用`$ref`获取到el-table的实体对象`instance`，从而使用[el-table](https://element.eleme.cn/#/zh-CN/component/table#table-methods)的所有方法
  167 +
134 168 ## List 表单项配置列表
135 169  
136 170 配置方法与Form组件基本相同，有部分属性删减
... ... @@ -139,4 +173,5 @@ tableEvents | ElementUI表格事件 | Object | - | {}
139 173 -|-|-|-|-
140 174 key | 参数名 | String | - | -
141 175 label | 参数标签 | String | - | -
142   -其它参数 | ElementUI表格项的属性 | Any | - | -
143 176 \ No newline at end of file
  177 +visible | 表格列显示状态 | Boolean,Function(tableData: array) | - | true
  178 +其它参数 | [el-table-column组件参数](https://element.eleme.cn/#/zh-CN/component/table#table-column-attributes) | Any | - | -
144 179 \ No newline at end of file
... ...
packages/table/index.vue
  Diff comments   View file @21d9ec8
... ... @@ -9,8 +9,13 @@
9 9 <slot></slot>
10 10 <template v-if="list && list.length > 0">
11 11 <template v-for="(item, index) in list">
12   - <slot v-if="$scopedSlots[item.key] || $slots[item.key]" :name="item.key" v-bind="item" :row="item"></slot>
13   - <el-table-column v-else v-bind="item" :prop="item.agentKey || item.key" :key="index" :min-width="item.minWidth || '120'"></el-table-column>
  12 + <template v-if="bindItemVisible(item.visible)">
  13 + <slot v-if="$scopedSlots[item.key] || $slots[item.key]" :name="item.key" v-bind="item"></slot>
  14 + <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'">
  15 + <slot slot-scope="{ row, column, $index }" :name="`value-${item.key}`" v-bind="item" :row="row" :value="row[item.key]" :column="column" :index="$index"></slot>
  16 + </el-table-column>
  17 + <el-table-column v-else v-bind="item" :prop="item.agentKey || item.key" :key="index" :min-width="item.minWidth || '120'"></el-table-column>
  18 + </template>
14 19 </template>
15 20 </template>
16 21 <slot name="$append"></slot>
... ... @@ -61,7 +66,14 @@ export default {
61 66 };
62 67 },
63 68 methods: {
64   -
  69 + // 绑定表格列显示隐藏状态
  70 + bindItemVisible(visible = true) {
  71 + let result = visible;
  72 + if (typeof visible === 'function') {
  73 + result = visible(this.tableData);
  74 + }
  75 + return result;
  76 + },
65 77 }
66 78 };
67 79 </script>
68 80 \ No newline at end of file
... ...