iview多列指标筛选的表格

前言：

想要实现Iview UI专业版的多列指标筛选的表格不是梦，就像这样与表格联动实现筛选列功能

1、首先可以先看看iview免费版的多列指标筛选的表格（https://www.iviewui.com/components/table）

2、代码案例

        1）先做点击出现列设置的icon

<Dropdown trigger="custom" :visible="visible" ref="dropRef">
   <Tooltip content="列设置" placement="top" style="margin-left: 2px" >
       <Icon type="md-options" size='17' @click="visible = !visible" class="oeration-data-bomactionbox-icon"/>
   </Tooltip>
   <DropdownMenu slot="list">
      <div class="rowset-title">列展示</div>
      <DropdownItem v-for="item in columnDisplay" :key="item.id" >
         <CheckboxGroup v-model="tableColumnsChecked" @on-change="changeTableColumns" >
           <Checkbox :label="item.label">{{item.text}}</Checkbox>
         </CheckboxGroup> 
      </DropdownItem>
   </DropdownMenu>
</Dropdown>

 先用了一下下拉菜单组件把最上面的icon和下面展示的复选框都括在一起，Dropdown 的为什么选择custom触发而不选择click是因为如果选择click触发那么点击一次下拉菜单就会缩回，如果用custom触发就不会缩回给我们一直选择想筛选的列设置，并用:visible="visible"控制下拉框的显示。 （css就不放了哦）

        2）data数据初始化化

data () {
   return {
        visible:false,
        columnDisplay:
           {id:0,label:"id",text:'id'},
           {id:1,label:"name",text:'用户名'},
           {id:2,label:"number",text:'手机号'},
           {id:3,label:"age",text:'年龄'},
           {id:4,label:"email",text:'邮箱'},
           {id:5,label:"sex",text:'性别'},
           {id:6,label:"state",text:'状态'},
           {id:7,label:"date",text:'创建时间'},
           {id:8,label:"action",text:'操作'},
        tableColumnsChecked:                    ["id","name","number","age","email","sex","state","date","action"],
//tableColumnsChecked设置的是复选框初始选中项也是初始哪些表格列可以展示
        
   }
}

 3）在methods中添加方法

            // 多列指标筛选的表格
            changeTableColumns () {
                this.columns = this.getTableColumns();
                //注1：这里的columns是我表格列的名字要换成你们自己
            },
            getTableColumns () {
                const tableColumnList = {
                    //注2：这里所有的列名都要和复选框的名字对应要不是表格就不显示了
                    selection: {
                        type: 'selection',
                        align: 'center',
                        width:60
                    },
                    id: {
                        title: 'id',
                        key: 'id',
                        align: 'center',
                        width:80
                    },
                    name:{
                        title: '用户名',
                        key: 'name',
                        align: 'center',
                    },
                    number:{
                        title: '手机号',
                        key: 'number',
                        align: 'center',
                    },
                    age:{
                        title: '年龄',
                        key: 'age',
                        align: 'center',
                    },
                    email:{
                        title: '邮箱',
                        key: 'email',
                        align: 'center',
                    },
                    sex:{
                        title: '性别',
                        key: 'sex',
                        align: 'center',
                    },
                    state:{
                        title: '状态',
                        key: 'state',
                        align: 'center',
                        slot:'state'
                    },
                    date:{
                        title: '创建时间',
                        key: 'date',
                        align: 'center',
                    },
                    action:{
                        title: '操作',
                        key: 'action',
                        align: 'center',
                        fixed: 'right',
                        slot:'action'
                    }
                };
                let data = [tableColumnList.selection];
                this.tableColumnsChecked.forEach(col => data.push(tableColumnList[col]));
                return data;
                //这三行是iview官网抄的
            },
            handleDrop(){
                 this.visible=!this.visible
            },
            outClick(e){
                let dropRef= this.$refs.dropRef.$el
                if(!dropRef.contains(e.target)&&this.visible){
                    this.visible=false
                }
            },
            //handleDrop()函数和outClick()函数都是设置当点击下拉菜单本身的时候不实现缩回，当点击除自身以外的时候缩回下拉菜单

4）mounted钩子函数

        设置初始化页面完成后，添加点击事件this.outClick和this.changeTableColumns数据初始化

mounted:function(){
            document.addEventListener('click',this.outClick);
            this.changeTableColumns();
        },

5）销毁监听事件

destroyed(){
            document.removeEventListener('click',this.outClick)
        }

最后就完成啦--看看效果

 点击下拉菜单不缩回的方法也是我和一个前辈学的，如果哪里说的不对或者还不懂得欢迎大家评论和批评指正