Commit 21d9ec8dda6cd9e3a5ee6bdf265ec8f06b2b9d23
1 parent
739ee90b
Exists in
master
and in
1 other branch
更新Table文档
Showing
3 changed files
with
121 additions
and
73 deletions
Show diff stats
examples/components/code-snippet.vue
| @@ -75,6 +75,7 @@ export default { | @@ -75,6 +75,7 @@ export default { | ||
| 75 | 75 | ||
| 76 | .eagle-code-snippet--icon-code { | 76 | .eagle-code-snippet--icon-code { |
| 77 | cursor: pointer; | 77 | cursor: pointer; |
| 78 | + min-width: 18px; | ||
| 78 | width: 18px; | 79 | width: 18px; |
| 79 | height: 18px; | 80 | height: 18px; |
| 80 | text-align: center; | 81 | text-align: center; |
examples/views/docs/component/table.md
| 1 | # Table 表格 | 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 | ```html | 11 | ```html |
| 12 | <template> | 12 | <template> |
| 13 | - <eagle-table ref="table" :value="tableData" :list="tableList"></eagle-table> | 13 | + <eagle-table :value="tableData" :list="list"></eagle-table> |
| 14 | </template> | 14 | </template> |
| 15 | 15 | ||
| 16 | <script> | 16 | <script> |
| @@ -18,35 +18,17 @@ export default { | @@ -18,35 +18,17 @@ export default { | ||
| 18 | data() { | 18 | data() { |
| 19 | return { | 19 | return { |
| 20 | tableData: [ | 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 | </script> | 33 | </script> |
| 52 | ``` | 34 | ``` |
| @@ -55,24 +37,19 @@ export default { | @@ -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 | ```html | 44 | ```html |
| 63 | <template> | 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 | </el-table-column> | 53 | </el-table-column> |
| 77 | </template> | 54 | </template> |
| 78 | </eagle-table> | 55 | </eagle-table> |
| @@ -83,38 +60,90 @@ export default { | @@ -83,38 +60,90 @@ export default { | ||
| 83 | data() { | 60 | data() { |
| 84 | return { | 61 | return { |
| 85 | tableData: [ | 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 | </script> | 148 | </script> |
| 120 | ``` | 149 | ``` |
| @@ -127,10 +156,15 @@ export default { | @@ -127,10 +156,15 @@ export default { | ||
| 127 | 156 | ||
| 128 | 参数|说明|类型|可选值|默认值 | 157 | 参数|说明|类型|可选值|默认值 |
| 129 | -|-|-|-|- | 158 | -|-|-|-|- |
| 159 | +value / v-model | 表格数据 | Array | - | - | ||
| 130 | list | 表单项配置列表 | Array | - | [] | 160 | list | 表单项配置列表 | Array | - | [] |
| 131 | tableProps | ElementUI表格属性 | Object | - | { size: 'small' } | 161 | tableProps | ElementUI表格属性 | Object | - | { size: 'small' } |
| 132 | tableEvents | ElementUI表格事件 | Object | - | {} | 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 | ## List 表单项配置列表 | 168 | ## List 表单项配置列表 |
| 135 | 169 | ||
| 136 | 配置方法与Form组件基本相同，有部分属性删减 | 170 | 配置方法与Form组件基本相同，有部分属性删减 |
| @@ -139,4 +173,5 @@ tableEvents | ElementUI表格事件 | Object | - | {} | @@ -139,4 +173,5 @@ tableEvents | ElementUI表格事件 | Object | - | {} | ||
| 139 | -|-|-|-|- | 173 | -|-|-|-|- |
| 140 | key | 参数名 | String | - | - | 174 | key | 参数名 | String | - | - |
| 141 | label | 参数标签 | String | - | - | 175 | label | 参数标签 | String | - | - |
| 142 | -其它参数 | ElementUI表格项的属性 | Any | - | - | ||
| 143 | \ No newline at end of file | 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 | \ No newline at end of file | 179 | \ No newline at end of file |
packages/table/index.vue
| @@ -9,8 +9,13 @@ | @@ -9,8 +9,13 @@ | ||
| 9 | <slot></slot> | 9 | <slot></slot> |
| 10 | <template v-if="list && list.length > 0"> | 10 | <template v-if="list && list.length > 0"> |
| 11 | <template v-for="(item, index) in list"> | 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 | </template> | 19 | </template> |
| 15 | </template> | 20 | </template> |
| 16 | <slot name="$append"></slot> | 21 | <slot name="$append"></slot> |
| @@ -61,7 +66,14 @@ export default { | @@ -61,7 +66,14 @@ export default { | ||
| 61 | }; | 66 | }; |
| 62 | }, | 67 | }, |
| 63 | methods: { | 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 | </script> | 79 | </script> |
| 68 | \ No newline at end of file | 80 | \ No newline at end of file |