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

前言

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

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

需求

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


preview.png

思路

  1. 将列数据定义在data中,然后动态绑定列数据到模板上
  2. 提供一组用于设置列展示的复选框,默认选中所有列,即默认展示所有列
  3. 选中或取消选中某个列时,更新模板中动态绑定的列数据,实现页面只显示需要展示的列

开发

状态

首先根据思路,可以确定几个状态:

  • tableData 表格数据
  • tableColumns 表格所有列数据,列数据的唯一来源
  • bindTableColumns 绑定到模板上的列数据,即需要展示的列数据
  • checkedTableColumns 复选框中选中的列数据

实现

然后开始实现:

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

    
    
    
    
  2. 然后,优化模板。

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

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

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

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

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

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

    
    
    
    

在线示例:

CodePen: element-ui table表格组件设置展示列的显示与隐藏

你可能感兴趣的:(element-ui表格组件table实现列的动态显示与隐藏)