element table通过checkbox动态显示隐藏列

通过点击checkbox来控制table其他列的显示与隐藏

展示表格时有太多的列，避免展示不开出现滑动条，为了美观只展示一部分的数据，其他的根据用户自己需求想要展示或者隐藏，所以想用checkbox开控制table列

			tableData: [],//表格数据
			tableHead: [],//表格所有列数据，列数据的唯一来源
			checklist: [],//checkbox数据，即暂时隐藏起来的数据
			bindTableColumns:[] // 绑定到模板上的列数据，即需要展示的列数据
			checkboxVal:[] //选中的列数据

html

<el-checkbox-group v-model="checkboxVal" >
	<el-checkbox v-for="item in checklist" :label="item.Lable" :key="item.ID">{{item.Lable }}</el-checkbox>
</el-checkbox-group>
//表格展示，根据获取的数据自行修改
 <el-table :data="tableData">
   <el-table-column v-for="(item,i) in bindTableColumns" :key="item.ID" :prop="item.Name"
							:label="item.Label" >
	</el-table-column>
  </el-table>

js

<script>
export default {
  data() {
    return {
        tableData: [],
        tableHead: [],
		checklist: [],
    };
  },
  //我的数据格式
/* tableHead: [{
					ID: 1,
					Label: '日期'，
					IsNulls: false,//初始隐藏
					Name: 'date'
				}, {
					ID: 2,
					Label: '地点'，
					IsNulls: false,//初始隐藏
					Name: 'address'
				},
				{
					ID: 3,
					Label: '姓名'，
					IsNulls: true, //初始显示
					Name: 'name'
				}],*/
				
  //我将tableHead分成了两部分 bindTableColumns和checkList，其中bindTableColumns为初始展示部分即IsNulls为true的部分，checkList为隐藏部分即IsNulls为false的部分
  computed: {
		bindTableColumns: {
			 get() {
				   return this.tableHead.filter((column) => column.IsNulls);
			  },
		    set(val) {},	
			},
			checkboxVal: {
				get() {
					// 返回选中的列名
					return this.bindTableColumns.map(column => column.Label);
				},
				set(checked) {
					// 设置表格列的显示与隐藏
					this.tableHead.forEach(column => {
						// 如果选中，则设置列显示
						if (checked.includes(column.Label)) {
							column.IsNulls = true;
						} else {
							// 如果未选中，则设置列隐藏
							column.IsNulls = false;
						}
					})
				}
			}
		},
};
</script>

我的tableHead请求后端时自己带了刚开是否显示隐藏的属性（IsNulls），如果没有就自己循环添加一个字段，方便后续使用