Vue动态控制表格列的显示隐藏

效果

如上图所示，点击table右上方的表格按钮，弹出菜单栏，进行勾选，从而达到表格对应列显示和隐藏

1.HTML部分(ant design)

<div class="right-btns">
  <!-- 按钮 -->
  <a-button class="table" @click="handleTable"><a-icon type="table" /></a-button>
  <!-- 弹出框 -->
  <div class="tableSelect" v-if="tableSelectVisible">
    <a-checkbox-group :value="checkValue" :options="colOptions"/>
  </div>
</div>

<!-- 表格内容 -->
<a-table :dataSource="expertList">
  <a-table-column v-if="colIsTrue[0]" title="专家ID" key="idAsString" />
  <a-table-column v-if="colIsTrue[1]" title="专家姓名" key="name" />
  <a-table-column v-if="colIsTrue[2]" title="行业" key="industry" />
  <a-table-column v-if="colIsTrue[3]" title="年龄" key="age" />
  <a-table-column v-if="colIsTrue[4]" title="学历" key="education" />
  <a-table-column v-if="colIsTrue[5]" title="工作单位" key="company" />
  <a-table-column v-if="colIsTrue[6]" title="入库时间" key="createAt" />
  <a-table-column title="操作" key="action">
    <template slot-scope="record">
      <a-button size="small" icon="edit" type="primary" @click="openUpd(record.id)">编辑</a-button>
      <a-button size="small" icon="delete" type="primary" @click="openDel(record)">删除</a-button>
    </template>
  </a-table-column>
</a-table>

a. 通过v-if="colIsTrue[6]"来判断表格对应列的状态

2.javascript部分

data(){
  return {
	colOptions:[
      {label:'专家ID',value:0,onChange:this.colChange},
      {label:'专家姓名',value:1,onChange:this.colChange},
      {label:'行业',value:2,onChange:this.colChange},
      {label:'年龄',value:3,onChange:this.colChange},
      {label:'学历',value:4,onChange:this.colChange},
      {label:'工作单位',value:5,onChange:this.colChange},
      {label:'入库时间',value:6,onChange:this.colChange},
    ],
    colIsTrue:[],
    checkValue:[],
  }
},
created(){//当所有数据都加载完成之后，将checkbox设置为全部选中状态
  this.colOptions && this.colOptions.forEach((item,index)=>{
    this.colIsTrue.push(true)
    this.checkValue.push(index)
  })
},
mounted(){//菜单栏弹出后，点击其它地方，关闭菜单栏
  let that=this;
  $(document).bind("click", function(e) {
    var target = $(e.target);
    if (target.closest(".tableSelect").length == 0 && target[0].className.indexOf('table')==-1) {
      that.tableSelectVisible=false;
    }
  })
  this.colOptions && this.colOptions.forEach((item,index)=>{
    this.colIsTrue.push(true)
    this.checkValue.push(index)
  })
},
methods:{
  colChange(e){//当checkbox有修改时
   const index=e.target.value
   this.colIsTrue[index] ? 
   (this.$set(this.colIsTrue,index,false)) : 
   (this.$set(this.colIsTrue,index,true))

   if(e.target.checked) this.checkValue.push(index)
   else{
     this.checkValue.forEach((item,arrIndex)=>{
       if(item==index){
         this.checkValue.splice(arrIndex,1)
       }
     })
   }
 },
 handleTable(){//打开菜单栏
   this.tableSelectVisible=true;
 },
}

3.css样式部分

.right-btns{
  position:relative;
  .tableSelect{
    position: absolute;
    background:#fff;
    border:1px solid #ecedef;
    display:inline-block;
    top: 33px;
    right: 0;
    z-index: 100;
    padding: 10px;
    width: 156px;
  }
}