AntDesignVue表格中列的自定义隐藏与展示

Vue版本：2.6.x，AntDesignVue版本：1.7.x

在工作中难免会遇到这种情况，较多列的表格展示，如果只想看某些关键列的数据，就需要用到筛选，官方文档的筛选是针对行的数据筛选，没有对列筛选的demo，而这个功能确实比较实用与常见，所以它来了，希望能让不知道的小伙伴少走点冤枉路：

<template>
    <a-card>
      <a-table :columns="filterColumn" :data-source="dataSource">
      	// 操作区域的插槽
        <span slot="action" slot-scope="text, record">
          <a href="#">操作</a>
        </span>
        // 自定义筛选菜单的插槽
        <span slot="filterDropdown">
          <a-card>
          	/* 多选框
          	options：指定可选项
          	defaultValue：默认选中的选项
          	change：变化时回调
			*/
            <a-checkbox-group :options="checkColumn" :defaultValue="checkColumn" @change="checkChange"/>
          </a-card>
        </span>
      </a-table>
    </a-card>
</template>

<script>
  export default {
    name: 'Demo',
    data() {
      return {
      	// 原始表格列配置描述
        columns: [
          {title: 'name', dataIndex: 'name'},
          {title: 'age', dataIndex: 'age'},
          {title: 'address', dataIndex: 'address'},
          {title: 'action', dataIndex: 'action', width: 147,
            /* 配置支持 slot-scope 的属性
             customRender: 生成复杂数据的渲染函数,function(当前行的值，当前行数据，索引）
             filterDropdown: 自定义筛选菜单
             */
            scopedSlots: { customRender: 'action', filterDropdown: 'filterDropdown'}
          }
        ],
        // 数据
        dataSource: [
          {key: '1', name: '张三', age: 18, address: '嘿嘿'},
          {key: '2', name: '李四', age: 19, address: '哈哈'},
          {key: '3', name: '王五', age: 20, address: '嘻嘻'}
        ],
        // 初始备份的表格列配置描述及过滤后的容器
        filterColumn: []
      }
    },
    created() {
      // 实例创建完成将columns备份给filterColumns
      this.filterColumn = this.columns
    },
    computed: {
      // 用计算属性取出columns的dataIndex，作为多选框的选项数据
      checkColumn: function() {
        return this.columns.map(item => item.dataIndex)
      }
    },
    methods: {
      // 多选框的事件回调
      checkChange(checked) {
      	// 初始是默认全选的，假设此刻点击了name的选择框
        console.log(checked) // ['age','address','action']
        const columns = this.columns
        // 核心部分，数组过滤循环遍历columns，如果选择的值中包含dataIndex则为true并暴露出去，反之亦然
        const filterValue = columns.filter(item => {
          if (checked.includes(item.dataIndex)){
          	// 当暴露值为true时，循环遍历的值会赋给filterValue
            return true
          }
          return false
        })
        // 依旧是假设点击的是name的选择框，暴露的值为[false,true,true,true],所以filterValue中的值没有包含name的那一列
        // 然后将值赋给filterColumns
        this.filterColumn = filterValue
      }
    }
  }
</script>

效果如下图：

点击某一项后：

反选也是一样的，这个demo主要用到了以下知识点：

1. JavaScript中数组的过滤filter及判断数组是否包含某一个值includes
2. Vue计算属性computed、插槽和生命周期里的created
3. antDesignVue用到了card-为了美观，table-数据展示，以及多选框checkbox

不止是antdesign，其他ui框架及原生也是可以的，此demo参考了

开源低代码平台JeecgBoot的常见案例中的 单表模型示例 点击跳转jeecgboot

开源UI框架vxe-table的复杂表格中的 显示、隐藏、折叠列 点击跳转vxe-table