ant design vue实现表格列的筛选显示与隐藏

演示《ant design vue实现表格列的筛选显示与隐藏》
效果演示

思路: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>
    原文作者:喝碗茶冷静一下
    原文地址: https://blog.csdn.net/qq_22669967/article/details/122606267
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞