antd-vue实现table表单动态选择筛选列的显示隐藏组件

简单概述下实现效果，在antd-2.0版本，鼠标移入弹出所有表单项标题，选择可以动态筛选表单列的功能。

效果如下：

组件代码：

<template>
  <div class="fliter fb">
    <a-dropdown v-model="dropDownVisible" :get-popup-container="() => root">
      <img src="@/assets/img/icon/filter.png" class="fliter-icon">
      <a-menu slot="overlay" style="max-height: 200px; overflow-y: scroll;">
        <a-menu-item v-for="(item,index) in columns" :key="index">
          <a-checkbox 
            :checked="item.show"
            @change="(e)=>{columnsCheck(e.target.checked, index)}"
          >
            {{item.title}}
          </a-checkbox>
        </a-menu-item>
      </a-menu>
    </a-dropdown>
  </div>
</template>

<script>
export default {
  name: 'FilterDisplay', //筛选表单显示设置
  props: ['tableColumns', 'root'], //表单项，根元素 需要指定get-popup-container的位置相对于父组件的根元素防止偏移 根据需要是否添加
  created() {
    this.columns = this.tableColumns.slice(0, -1) //默认我是去掉了最后一列不允许删除，可以根据需要更改
    // this.columns = JSON.parse(JSON.stringify(this.tableColumns.slice(0, -1))) //如果不想父子组件共用一个表单项就重新分配一个地址存储
  },
  data() {
    return {
      dropDownVisible: false,
      columns: [],
    }
  },
  methods: {
    columnsCheck(checked, index){
      this.columns[index].show = checked
      // this.$emit('columnsChange', checked, index) //如果重新分配地址存储对象，父组件需要做获取值的处理
    }
  },
}
</script>

<style lang="less" scoped>
  .fb{
    display: flex;
  }
  .ant-checkbox-wrapper{
    width: 100%;
  }
  .fliter-icon{
    width: 20px;
    height: 20px;
  }
</style>

父组件引入代码：

//引入组件 根据位置自行修改路径
import FilterDisplay from '@/pages/components/FilterDisplay'
components: { FilterDisplay },

//需要在父组件根元素上添加该属性传递给筛选组件 根据需要添加
ref="root"

//父组件table的表单项过滤
:columns="columns.filter(col=> col.show)"

需要将表单项columns全部对象添加一个属性show: true和必需一个key属性不能重复，类似这样：

{
          title: '列表项a',
          show: true,
          key: 'a',
          customRender: () =>
            'a'
        },
        {
          title: '列表项b',
          show: true,
          key: 'b',
          customRender: () =>
            'b'
        },
        {
          title: '列表项c',
          show: true,
          key: 'c',
          customRender: () =>
            'c'
        },

 接下来，如果想和最后一列比如操作列合并显示，效果如下：

在父组件添加如下代码：

//需要把最后一列如操作列的标题自定义
{
    // title: '操作',
    slots: { title: 'actionTitle' },
    key: 'action',
    fixed: 'right',
    show: true,
    scopedSlots: { customRender: 'action' },
},

//在table内添加如下代码
<div slot="actionTitle" class="actionTitle">
    <div>操作</div>
    <div class="fb" style="margin-left:10px">
        <filter-display
            :root="$refs.root"
            :tableColumns="columns"
        ></filter-display>
    </div>
</div>


<style lang="less" scoped>
.actionTitle{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
::v-deep .ant-table-header-column{
  width: 100%;
}
</style>

如果想单独筛选项固定一列的话，效果如下：

在父组件添加如下代码：

//首先在表单项columns里添加该对象
{
    slots: { title: 'filterDisplay' }, //自定义表单头
    fixed: 'right',
    show: true,
    key: 'filterDisplay',
},

//然后在table内添加如下代码
<template #filterDisplay>
    <div class="fb">
        <filter-display
            :root="$refs.root"
            :tableColumns="columns"
        ></filter-display>
    </div>
</template>

  大功告成，需要注意的就是父组件的根元素需要传给筛选组件不然弹出的表单项可能会偏移，还有就是需要把表单项的show和key加上，table的columns的filter过滤别忘记加了，剩下就是自定义表单项了，好了，有什么问题可以给小编留言，求赞求赞！！！！