演示
效果演示
思路:columns数组添加show元素,表格根据show元素判断显示与隐藏。checkbox定义show的true或false。
<template>
<a-card title="ant design vue 表格列的筛选显示" :bordered="false">
<a-dropdown :trigger="['click']" style="margin-bottom: 10px" v-model="DropdownVisible">
<a-menu slot="overlay">
<a-menu-item v-for="(item,index) in table_columns" :key="index"><a-checkbox :checked="item.show" @change="(e)=>{columnsCheck(e.target.checked,table_columns,index)}">{{item.title}}</a-checkbox></a-menu-item>
</a-menu>
<a-button style="margin-left: 8px"> 筛选列 <a-icon type="down" /> </a-button>
</a-dropdown>
<a-table :columns="table_columns.filter((col,num)=>{if(col.show){return col}})" :data-source="tableData" :pagination="false" bordered>
</a-table>
</a-card>
</template>
<script>
const table_columns = [
{
title: '单位编号',
dataIndex: 'orgId',
show:true
},
{
title: '单位名称',
dataIndex: 'company',
show:true
},
{
title: '法人姓名',
dataIndex: 'name',
show:true
},
{
title: '联系电话',
dataIndex: 'phone',
show:true
},
{
title: '成立日期',
dataIndex: 'date',
show:true
},
{
title: '员工数',
dataIndex: 'num',
show:true
},
{
title: '注册资金',
dataIndex: 'money',
show:true
}
]
const tableData = [
{
key: '1',
orgId: '001',
company: '001公司',
name: '张三',
phone: '15000000000',
date: '2021-10-11',
num:20,
money:'200万'
},
{
key: '2',
orgId: '002',
company: '002公司',
name: 'juli',
phone: '15000000001',
date: '2021-10-12',
num:33,
money:'300万'
},
{
key: '3',
orgId: '003',
company: '003公司',
name: 'zhang',
phone: '15122255645',
date: '2021-11-11',
num:50,
money:'233万'
},
]
export default {
name: "platformGovDataSelect",
data(){
return{
DropdownVisible:false, //选择checkbox后不收回菜单
table_columns,
tableData
}
},
methods:{
//筛选表的列
columnsCheck(checked,data,index){
data[index].show = checked
}
}
}
</script>
<style scoped>
</style>