vue+element表格表头列 动态配置列控制显示隐藏

1.配置表头列的子组件

子组件全部代码 做了个本地存储 选择配置好的列 刷新 退出在登陆都会记录之前选择的状态

<template>

  <el-popover  placement="bottom" width="150">
            <el-checkbox-group v-model="info">
              <el-col :span="24"    >
               <el-checkbox v-for="item in colSelect" :label="item" :key="item" ></el-checkbox>
              </el-col>
            </el-checkbox-group>
             <f-button slot="reference" icon="column">设置</f-button>
        </el-popover>
</template>

<script>
    export default {
        name: "ColumnSelect",
        props:["colTable","colData"],//从父组件传过来的值
        watch: {
          info(val) {
            let arr = this.colSelect.filter(i => !val.includes(i)); // 未选中
            // console.log(arr,"arr")
            localStorage.setItem(this.colTable,JSON.stringify(arr))
            this.colData.filter(i => {
              if (arr.indexOf(i.title) != -1) {
                i.istrue = false; 
              } else {
                i.istrue = true;
              }
            });
          }
        },
         data() {
            return {
              info:[],
              colSelect:[],
              colOptions:[]}
        },
        created(){
         this.colData.forEach((item,index)=>{
              this.colSelect.push(item.title);
              this.colOptions.push(item.title); 
          })
          this.info=this.colOptions
          
          let UnData=localStorage.getItem(this.colTable)
          UnData=JSON.parse(UnData)
          // console.log(UnData,"未选中")
          if(UnData!=null){
            this.info=this.info.filter((item)=>{
             return !UnData.includes(item)
            })
            // console.log(this.info,"选中的")
          }
        } 
    }
</script>

<style scoped>

</style>

父组件使用子组件

 <column-select colTable="clientPage"  :colData="colData" ></column-select>

//需要传的数据
 	
 	 colData: [{title: "名称",isshow:true,field:"name"},
          {title: "性别", isshow:true,field:"sex"},
          {title: "年龄", isshow:true,field:"age"},
          {title: "时间",isshow:true,field:"time"},
          {title: "事件",isshow:true,field:"event"},
          {title: "地点", isshow:true,field:"address"}],
  

在表格列上使用v-if

//参数和基础数据中的field一致 
 <el-table-column prop="mobile" v-if="isShowCol('name')" label="名称" width=""></el-table-column>
 <el-table-column prop="username" v-if="isShowCol('sex')" label="性别" width=""></el-table-column>

methods：{
//传参 通过field值对比 拿到true 或false
	isShowCol(field) {
      let sd= this.colData.filter((item)=>{return item.field===field})
      return sd[0].istrue
      
    },
}