Vue版本：2.6.x，AntDesignVue版本：1.7.x（下有v3的修改demo）
在工作中难免会遇到这种情况，较多列的表格展示，如果只想看某些关键列的数据，就需要用到筛选，官方文档的筛选是针对行的数据筛选，没有对列筛选的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>PS：2022-12-01更新：
许多小伙伴问到了比如操作那一列，如何不让选择，这个很简单，多选框的数据来源是通过计算属性遍历options取出dataIndex，设置defaultValue默认选择项时可以设置是否为disabled状态，这样子操作列就无法被隐藏了
computed: {
// 用计算属性取出columns的dataIndex，作为多选框的选项数据
checkColumn: function() {
return this.columns.map(item => return item.dataIndex)
},
defaultCheck: function() {
return this.columns.map(item => {
if (item.title === 'action') {
return { label: item.dataIndex, value: item.dataIndex, disabled: true }
} else {
return { label: item.dataIndex, value: item.dataIndex }
}
})
}
}
// template中
<a-checkbox-group :options="checkColumn" :defaultValue="defaultCheck" @change="checkChange"/>PS：2023-01-06更新
有的小伙伴已经全面拥抱vue3了，ant-design-vue也早早就支持了vue3，小伙伴尝试在v3里迁移文中demo失败，这里我也更新下v3版本如何实现列的自定义隐藏与展示，demo使用Vue版本：3.2.45，AntDesignVue版本：3.2.15，需要知道的是ant-design-vue3.x相比于ant-design-vue1.x改动了一些API，如文中用到的checkbox-group的defaultValue取消；table废弃了 column.slots, 新增 v-slot:bodyCell、v-slot:headerCell，用于自定义单元格；新增 column.customFilterDropdown 、v-slot:customFilterDropdown，用于自定义筛选菜单；新增了 v-slot:customFilterIcon 用于自定义筛选按钮，所以相应的写法我们需要变动，但整体逻辑还是相似的，以下代码以composition风格及setup语法糖实现，效果如下图：
<script setup lang="ts">
import {computed, ref} from 'vue'
// 原始列
const columns = [
{title: 'name', dataIndex: 'name', key: 'name'},
{title: 'age', dataIndex: 'age', key: 'age'},
{title: 'address', dataIndex: 'address', key: 'address'},
{title: 'action', dataIndex: 'action', key: 'action', width: 147, customFilterDropdown: true}
];
// 数据
const data = [
{key: '1', name: '张三', age: 18, address: '嘿嘿'},
{key: '2', name: '李四', age: 19, address: '哈哈'},
{key: '3', name: '王五', age: 20, address: '嘻嘻'}
];
// 选择框使用的数据
const checkColumn = computed(() => {
return columns.map(item => {
if (item.dataIndex === 'action') {
return {label: item.dataIndex, value: item.dataIndex, disabled: true}
}
return {label: item.dataIndex, value: item.dataIndex}
})
})
// 默认被选中的数据
const checkValue = columns.map(item => item.dataIndex)
// 备份和被操作列
const filterColumn = ref(columns)
// 选择事件
const checkChange = (checked: string) => {
console.log('click', checked)
const filterValue = columns.filter(item => {
if (checked.includes(item.dataIndex)){
// 当暴露值为true时，循环遍历的值会赋给filterValue
return true
}
return false
})
console.log(filterValue)
filterColumn.value = filterValue
console.log(filterColumn.value)
}
</script>
<template>
<a-table :columns="filterColumn" :data-source="data">
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'action'">
<span>
<a>操作</a>
<a-divider type="vertical" />
<a>删除</a>
<a-divider type="vertical" />
<span>{{record}}</span>
</span>
</template>
</template>
<template #customFilterDropdown="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }">
<a-card>
<a-checkbox-group :options="checkColumn" v-model:value="checkValue" @change="checkChange"/>
</a-card>
</template>
</a-table>
</template>
PS：2023-02-13更新
有小伙伴问到如何默认隐藏，评论里当时思考的不是很完善，下来后实现了下，主要是改动数据源，有点像是已经做了一次展示/隐藏的操作，如下，template中无改动，此处不作展示：
// 原始列
const columns = [
{ title: "name", dataIndex: "name", key: "name" },
{ title: "age", dataIndex: "age", key: "age" },
{ title: "address", dataIndex: "address", key: "address" },
{ title: "action", dataIndex: "action", key: "action", width: 147, customFilterDropdown: true },
];
// 数据
const data = ref([
{ name: "张三", age: 18, address: "嘿嘿" },
{ name: "李四", age: 19, address: "哈哈" },
{ name: "王五", age: 20, address: "嘻嘻" },
]);
// 选择框使用的数据
const checkColumn = computed(() => {
return columns.map((item) => {
if (item.dataIndex === "action") {
return { label: item.dataIndex, value: item.dataIndex, disabled: true };
}
return { label: item.dataIndex, value: item.dataIndex };
});
});
// 改动一，默认被选中的数据，手动选择哪些值被选中，此前为全选
// 是不是很眼熟，是的他就和checked一样，这里就相当于提前选择了一次
const checkValue = reactive<string[]>(["name", "age", "action"]);
// const checkValue = columns.map(item => item.dataIndex) <= 原
// 改动二，因为有两处用到相同的逻辑，所以抽出一个公共方法
function filterAction(value: Array<string>) {
return columns.filter((item) => {
if (value.includes(item.dataIndex)) {
// 为true时，循环遍历的值会暴露出去
return true;
}
return false;
});
}
// 改动三，备份和被操作的数据，不再是直接拿columns，而是与选择一次的逻辑一样取出来展示
const selectData = filterAction(checkValue);
const filterColumn = ref(selectData);
// const filterColumn = ref(columns) <=原
// 选择事件，改动不大只是抽出了公共方法filterAction
const checkChange = (checked: Array<string>) => {
console.log("click", checked);
const filterValue = filterAction(checked);
filterColumn.value = filterValue;
};
这个demo主要用到了以下知识点：
- JavaScript中数组的过滤filter及判断数组是否包含某一个值includes
- Vue计算属性computed、插槽和生命周期里的created
- antDesignVue用到了card-为了美观，table-数据展示，以及多选框checkbox
此demo参考了
开源低代码平台JeecgBoot的常见案例中的 单表模型示例 点击跳转jeecgboot 开源UI框架vxe-table的复杂表格中的 显示、隐藏、折叠列 点击跳转vxe-table
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
