动态显示列组件
# 动态显示列组件
# 一. 前言
由于公司要做的项目想要在页面上动态控制列表中某些列的显示与隐藏，但是 element 本身的 el-table 框架是没有这个功能的，只能自己把列表封装成一个组件，方便以后使用。
# 二. 起步
Element官方的列表是这样的：
显然，这个列表是无法满足我们的需求的
先创一个建名为 FileTable 的组件，然后我们定义需要父组件传的值
<script>
export default {
props: {
tableData: { // 父组件传递过来的表格数据
type: Array,
default: () => {
return []
}
},
tableLabel: { // 父组件传递过来的表头数据
type: Array,
default: () => {
return []
}
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
引入 Element 官方的 el-table 组件：
- 绑定父组件传入的表格数据
- 循环父组件传入的表头数据 来生成 el-table-column 列
- v-if 绑定 show 属性控制该列是否显示
<!-- data绑定父组件传入的表格数据 -->
<el-table
ref="filterTable"
:data="tableData"
:max-height="tableHeight"
size="small"
row-class-name="row"
cell-class-name="column"
:highlight-current-row="true"
fit
:header-cell-style="headerStyle"
:cell-style="{'text-align':'center'}"
@cell-click="clickRow"
@row-dblclick="rowdblclick"
@selection-change="SelectChange"
>
<el-table-column
:show-overflow-tooltip="true"
sortable
type="selection"
width="45" />
<el-table-column
:show-overflow-tooltip="true"
sortable
type="index"
:index="indexMethod"
:cell-style="{'text-align':'center'}"
style="text-align:center"
label="ID"
width="85"
></el-table-column>
<!-- 循环父组件传入的表头数据 -->
<template v-for="(item, index) in tableLabel">
<!-- v-if控制该列是否显示 -->
<el-table-column
v-if="item.show"
:key="index"
:show-overflow-tooltip="true"
sortable
:prop="item.prop"
:width="item.width"
:label="item.label"/>
</template>
</el-table>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
然后通过 this.$emit 绑定父组件自定义事件，子组件来触发(根据个人需求定义)
<script>
export default {
methods: {
// 单击选中某一行选框
clickRow(row) {
this.$refs.filterTable.toggleRowSelection(row)
this.$emit('clickRow', row)
},
// 双击选中某一行
rowdblclick(row) {
this.$emit('rowdblclick', row)
},
// 选中一行或者多行数据
SelectChange(val) {
this.$emit('SelectChange', val)
},
// 翻页序号连续
indexMethod(index) {
return (index + 1)
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
父组件传值表头数据的格式:
tableLabel: [
{ label: 'MerchantPaymentDesc', width: '', prop: 'merchantPaymentDesc', show: true },
{ label: 'storeDesc', width: '', prop: 'storeDesc', show: true },
{ label: 'TransTime', width: '', prop: 'transTime', show: true },
{ label: 'PayBarcode', width: '', prop: 'payBarcode', show: true },
{ label: 'PlatformDesc', width: '', prop: 'platformDesc', show: true },
{ label: 'TransType', width: '', prop: 'transType', show: true },
{ label: 'ResultDesc', width: '', prop: 'resultDesc', show: true },
{ label: 'TotalAmount', width: '', prop: 'totalAmount', show: true },
{ label: 'RealPayAmount', width: '', prop: 'realPayAmount', show: true },
{ label: 'CreatedOn', width: '', prop: 'createdOn', show: true }
]
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
到此为止，el-table 的基本功能已经封装完毕了，但需求是动态来控制这些列的显示与隐藏。
# 三. 实现动态显示列
上面已经在 el-table-column 上绑定了 show 属性通过 v-if 来控制列的显示与隐藏，接下来只需要能够控制这些 v-if 绑定的 show 属性就可以了。
我使用的的是 el-checkbox 来绑定和控制这些值
引入一个 el-dialog 弹出框 里面放上我们的 el-checkbox v-for循环 父组件传入的表头值 v-model 绑定 show 属性
<el-dialog ref="dialog__wrapper" v-dialogDrag :title="$t('message.TableColumn')" :visible.sync="dialogFormVisible" :close-on-click-modal="false" :close-on-press-escape="false">
<el-row :gutter="20">
<el-col
v-for="(item, index) in tableLabel"
:key="index"
:span="6"
style="height:35px"
>
<el-checkbox v-model="item.show">{{ item.label }}</el-checkbox>
</el-col>
</el-row>
<div slot="footer" class="dialog-footer">
<el-button type="danger" size="mini" @click="dialogFormVisible = false">{{ $t('button.cancel') }}</el-button>
</div>
</el-dialog>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
在列表上嵌入一个按钮来触发弹出该 dialog
<el-table
ref="filterTable"
:data="tableData"
:max-height="tableHeight"
size="small"
row-class-name="row"
cell-class-name="column"
:highlight-current-row="true"
fit
:header-cell-style="headerStyle"
:cell-style="{'text-align':'center'}"
@cell-click="clickRow"
@row-dblclick="rowdblclick"
@selection-change="SelectChange"
>
<el-table-column :show-overflow-tooltip="true" sortable type="selection" width="45" />
<el-table-column :show-overflow-tooltip="true" sortable type="index" :index="indexMethod" :cell-style="{'text-align':'center'}" style="text-align:center" label="ID" width="85">
<!-- 这个地方是新添加的按钮 -->
<template slot="header">
<el-button size="mini" type="" class="el-icon-s-operation" click @click="dialogFormVisible=true" />
</template>
</el-table-column>
<template v-for="(item, index) in tableLabel">
<el-table-column
v-if="item.show"
:key="index"
:show-overflow-tooltip="true"
sortable
:prop="item.prop"
:width="item.width"
:label="item.label" />
</template>
</el-table>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
OK,大功告成，接下来我们在父组件引入该组件
import FileTable from '@/components/FileTable/FileTable.vue';
export default {
components: { FileTable }
}
1
2
3
4
5
2
3
4
5
页面上使用，绑定上我们需要的值，一行搞定~
<FileTable id="out-table" :table-data="tableData" :table-label="tableLabel" @rowdblclick="rowdblclick" @SelectChange="SelectChange" />
1
接下来我们看看效果：
列表:（箭头指的就是我们嵌入的 button，点击弹出我们的 dialog）
然后点开，就可以通过勾选里面的复选框来控制列的显示与隐藏啦！
上次更新: 2022/07/08, 17:40:08