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
-
+
```
@@ -55,24 +37,19 @@ export default {
## 自定义列
-表格列可以通过`slot`动态配置,名称对应各列的列名
+在使用`list`的同时,也支持**表格列具名插槽**及**表格列值具名插槽**,以满足不同的业务需求
-::: snippet 可以使用`slot`加`slot-scope`的方式,新版vue可以使用`#slotname`的形式
+::: snippet 在组件内部通过具名插槽的方式,替换对应内容,**表格列具名插槽**格式为`key`,返回值为对应配置项所有参数;**表格列值具名插槽**格式为`value-key`,返回值为row、value、column、index及对应配置项所有参数。
```html
-
-
-
-
-
-
- {{ $index }}
- {{ label }}
- {{ key }}
- {{ number }}
- {{ postcode }}
-
+
+
+ {{ value }}
+
+
+
+ {{ row.position }}
@@ -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);
+}
+
+```
+
+:::
+
+## 首尾追加列
+
+一般情况下,会存在一些特殊的列必然位于首列或尾列,这时可以设置追加列,通常配合Scheme组件使用
+
+::: snippet 在表格中,可以使用**追加列具名插槽**进行表格列的追加,插槽有:尾列追加插槽`$append`、末尾插槽`$end`以及组件默认插槽被认为是首列追加插槽。
+
+```html
+
+
+
+ 删除
+
+
+
+
+
+
+
+
+```
+
+:::
+
+## 动态列
+
+在特殊业务需求下,对于表格列的显示隐藏会有一些动态需求
+
+::: snippet 在表格列数据配置`list`属性中,使用`visible`作为列显示和隐藏的判断条件,支持**Boolean**和**Function**类型
+
+```html
+
+
+
+
+
```
@@ -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 @@
-
-
+
+
+
+
+
+
+
@@ -61,7 +66,14 @@ export default {
};
},
methods: {
-
+ // 绑定表格列显示隐藏状态
+ bindItemVisible(visible = true) {
+ let result = visible;
+ if (typeof visible === 'function') {
+ result = visible(this.tableData);
+ }
+ return result;
+ },
}
};
\ No newline at end of file
--
libgit2 0.21.0