动态显示a-table表头

情景描述：使用下拉框控制表头动态显示

1.使用a-select中的onChange属性触发changeNum事件

代码

<a-form-item label="每靶位人数">
   <a-select ref="select" placeholder="请选择人数" v-model:value="queryParam.capacity"         
       style="width: 120px" @change="changeNum">
          <a-select-option value="2">2人</a-select-option>
          <a-select-option value="3">3人</a-select-option>
          <a-select-option value="4">4人</a-select-option>
   </a-select>
</a-form-item>

表头数据

2.通过对表头数组的裁剪来来实现动态表头

代码

changeNum(e){
            console.log("---------");
            console.log(e);
            if(e == 4){
                this.tempColumns = this.columns
            }else if(e == 3){
                this.tempColumns = this.columns.slice(0,3)
            }else if(e == 2){
                this.tempColumns = this.columns.slice(0,2)
            }
        },

3.实现效果