php控制表格列的显示与隐藏,element-ui表格组件table实现列的动态显示与隐藏

╰半橙微兮° 2022-11-18 04:33 277阅读 0赞

前言

在开发后台管理系统中，表格是经常用到的数据展示方式。然而，有时候表格展示的列过多，会出现一屏展示不下，需要手动滚动滚动条查看的情况。

其实，在系统实际使用的过程中，不同用户关注的列不同，并不是一定要展示所有的列。因此，可以开发一个能够配置表格需要展示的列的功能，这样只展示关注的列，不关注的列就无需在页面上展示，提高用户的使用体验。

需求

要求可以动态配置表格中需要展示的列，默认展示所有列。

![d61dedc08fd8][]

preview.png

思路

将列数据定义在data中，然后动态绑定列数据到模板上

提供一组用于设置列展示的复选框，默认选中所有列，即默认展示所有列

选中或取消选中某个列时，更新模板中动态绑定的列数据，实现页面只显示需要展示的列

开发

状态

首先根据思路，可以确定几个状态：

tableData 表格数据

tableColumns 表格所有列数据，列数据的唯一来源

bindTableColumns 绑定到模板上的列数据，即需要展示的列数据

checkedTableColumns 复选框中选中的列数据

实现

然后开始实现：

首先，写一个基础的表格。(参考element-ui基础表格)

export default \{

data() \{

return \{

tableData: \[

date: "2016-05-02",

address: "上海市普陀区金沙江路 1518 弄",

\},

date: "2016-05-04",

address: "上海市普陀区金沙江路 1517 弄",

\},

date: "2016-05-01",

address: "上海市普陀区金沙江路 1519 弄",

\],

\};

\},

\};

然后，优化模板。

将表格的列数据tableColumns定义在data中，在模板中通过v-for指令遍历列数据。

v-for="column in tableColumns"

:key="column.prop"

:prop="column.prop"

:label="column.label"

export default \{

data() \{

return \{

tableColumns: \[

prop: "date",

label: "日期",

\},

prop: "name",

label: "姓名",

\},

prop: "address",

label: "地址",

\},

\],

\};

\},

\};

其次，优化列数据tableColumns，给每一个column添加show属性，用于表示列的显示与隐藏。默认为true，即默认展示所有列。

export default \{

data() \{

return \{

tableColumns: \[

prop: "date",

label: "日期",

show: true

\},

prop: "name",

label: "姓名",

show: true

\},

prop: "address",

label: "地址",

show: true

\},

\],

\};

\},

\};

再次，添加一个computed属性bindTableColumns，用于过滤出需要展示的列，并绑定到模板上。

这样，后续对列的配置都只会操作tableColumns中列的显示与隐藏属性show，bindTableColumns会自动更新，页面也会自动重新渲染。

v-for="column in bindTableColumns"

:key="column.prop"

:prop="column.prop"

:label="column.label"

export default \{

computed: \{

bindTableColumns() \{

return this.tableColumns.filter((column) => column.show);

\};

然后，实现表格列配置模板，用于设置列的显示与隐藏。

这里使用一组复选框，默认选中所有可供配置的表格列。

请选择表格需要展示的列：

v-for="column in columns"

:key="column.prop"

:label="column.prop"

>\{ \{ column.label \}\}

export default \{

computed: \{

/\* 这里使用了getter和setter，这样写的好处是不用自己手动监听复选框的选中事件 \*/

checkedTableColumns: \{

get() \{

// 返回选中的列名

return this.bindTableColumns.map(column => column.prop);

\},

set(checked) \{

// 设置表格列的显示与隐藏

this.tableColumns.forEach(column => \{

// 如果选中，则设置列显示

if(checked.includes(column)) \{

column.show = true;

\} else \{

// 如果未选中，则设置列隐藏

column.show = false;

\})

在线示例：

[d61dedc08fd8]: /images/20221022/96e8eb6410b9470ea6c8ba84e0eade01.png

php控制表格列的显示与隐藏,element-ui表格组件table实现列的动态显示与隐藏

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 elementui表格的列拖拽及动态显示列实现

相关 ElementUI table表格列动态渲染

相关 elementUI中table表格列实现拖拽

相关 php控制表格列的显示与隐藏,element-ui表格组件table实现列的动态显示与隐藏

相关动态显示/隐藏 DataGrid 的列

相关 jquery.dataTables表格列动态显示隐藏封装(二)

相关 layui按条件隐藏表格列

相关 table表格列随鼠标高亮显示

相关 layui 表格操作列按钮动态显示

相关 NavicatPremium显示/隐藏某些列