vue实现checkbox点击选择控制element-ui table或vxe-table表格动态列展示与隐藏

HTML代码：

<div class="app">
		<div class="choice-box">
			<span class="choice-name">检测维度:</span>
			<div class="choice-checkbox">
				<el-checkbox-group v-model="dimension" @change="choice" :min="1">
					<el-checkbox :checked="checked" v-for="item in dimensionArr" :label="item" :key="item">{{ item }}</el-checkbox>
				</el-checkbox-group>
			</div>
		</div>
		<vxe-table
			border
			resizable
			ref="xTable"
			:header-cell-style="{ background: '#CFE1DB', color: '#333333', fontSize: '16px' }"
			:row-style="{ fontSize: '16px', color: '#777777' }"
			:data="tableData"
			align="center"
			:edit-config="{ trigger: 'click', mode: 'cell' }"
		>
				<vxe-table-column field="class" title="品级" :edit-render="{ name: 'input', attrs: { type: 'text' } }"></vxe-table-column>
				<vxe-table-column
					v-for="(item, index) in dimensionData"
					:key="index"
					:field="item.field"
					:title="item.title"
					:edit-render="{ name: 'input', attrs: { type: 'text' } }"
				></vxe-table-column>
				<vxe-table-column title="操作" width="160">
						<template v-slot="{ row, rowIndex }">
							<template v-if="rowIndex == 0">
								<vxe-button v-if="row.show" type="text" class="count" @click="count(row)">计算</vxe-button>
								<vxe-button v-else type="text" class="stop" @click="stop(row)">停止</vxe-button>
							</template>
							<template v-if="rowIndex != 0">
								<vxe-button v-if="row.show" type="text" class="count" @click="count(row)">计算</vxe-button>
								<vxe-button v-else type="text" class="stop" @click="stop(row)">停止</vxe-button>
								<vxe-button type="text" class="delete" @click="removeEvent(row)">删除</vxe-button>
							</template>
						</template>
				</vxe-table-column>
		</vxe-table>
	</div>

JS代码：

export default{
		data() {
			return {
				checked:true,
				dimension:[],//多选框勾选项
				dimensionArr:["颜色","直径","均匀度"],//多选框
				dimensionData:[{ field: 'color', title: '颜色' }, { field: 'diameter', title: '直径' },{ field: 'uniformity', title: '均匀度' }],//表头数组
				demo:[{ field: 'color', title: '颜色' }, { field: 'diameter', title: '直径' },{ field: 'uniformity', title: '均匀度' }],//维度控制表头所需变量
			}
		},
		methods:{
			choice() {
				const demo = this.dimension;
				const demo1 = this.demo;
				const arr = demo1.filter(item => {
					return demo.includes(item.title);
				});
				console.log('arr', arr);
				this.dimensionData = arr;
			},
		}
	}

CSS代码

		* {
			padding: 0;
			margin: 0;
			box-sizing: border-box
		}
		
		body {
			height: 100%;
		}
		
		.app {
			position: relative;
			width: 90%;
			padding-bottom: 30px;
			max-width: 1920px;
			background-color: #F5FBFF;
			box-sizing: border-box;
			margin: auto;
			overflow: hidden;
		}
		.choice-box{
			width: 100%;
			height: 30px;
			line-height: 30px;
			display: flex;
		}
		.choice-name{
			font-size: 16px;
			color: #25B865;
		}
		.el-checkbox{
			margin-left: 20px;
			font-size: 14px;
			color: #777777;
		}

思路：
数组筛选 方法是filter()，筛选条件是 数组里的值是否包含对象数组里的title值 方法是includes()，返回包含的项
注意的点：必须要设一个变量让它的值等于表头的值，也就是我这里设的demo变量，不设的话实现不了
我这里是用的vxe-table写的表格，用element-ui 的table也是一样的思路
也可以参考这篇博客的方法去实现，大同小异