Vue is compatible with bootstrap-table to achieve dynamic header shrinkage

At present, ant design-vue is used. When the leader is in a meeting, it is required to add a drop-down to the table header to realize the contraction of the table, so let's see the effect first without further ado.

 Here is my idea, hope it can help you

First introduce bootstrap-table

Be careful not to install the @4 version, just install @3.4.1, and introduce the style library globally

The following is my specific implementation idea

<div>
<a-button class="bornone tablecrdss" @click="tableCarshow" title="列表">
 <div class="glyphicon glphicon-th"></div>
<div class="glyphicon glphicon-triangle-bottom" ></div>
</a-button>
<div v-show="tableCard" class="cardss">
<a-checkbox-group
:options="checkColumn"
v-model="card"
@change="checkChange"
class="tablecard"
/>

</div>
</div>
<a-table :column="filterColumn">
</a-table>
//card字段默认设置表格所有列
checkChange(val){
 const = columnstow = this.columns;
const filter = columnstow.filter(item=>{
if(val.includes(item.title)){
return true
}
return false
})
this.filterColumn = filter
this.filterColumn.length != 0 ? this.tableCard = true :this.tableCard = false
}

computed:{
checkColumn:function(){
  return this.columns.map(item=>item.title)
}
}

tableCarshow(){
this.tableCard = !this.tableCard
if(this.filterColumn.length==0){
//filterColumn是过滤的列
//columns第一次请求的的列
this.filterColumn=this.columns
}
}