el-table表格设置——动态修改表头

(1) 首先是form表单写表单设置按钮：

（1.1）使用el-popover，你需要修改的是this.colOptions，colSelect:

"popover" popper-class="planProver" placement="bottom" width="300" trigger="click" content="{this.colOptions}" class="elPopover">
					<el-checkbox-group v-model="colSelect" @change="refreshPic">
						<el-checkbox v-for="item in colOptions" :label="item" :key="item" style="display: block; padding-top: 10px">el-checkbox>
					el-checkbox-group>
					<el-button type="primary" slot="reference">表格设置el-button>
				

（1.2）js代码中的data

data(){
    return{
        colOptions: ['飞行计划编号', '通航用户', '任务性质', '机型', '飞行员', '开始时间', '结束时间', '联系人', '24位地址码', '机载设备', '飞行规则'],
		// 已选中的表头:默认显示内容
		colSelect: [],
		// 默认选择的
		colSelectToday: ['飞行计划编号', '通航用户', '任务性质', '机型', '飞行员', '开始时间'],
		// 主要是为了获取table的prop
		columnLabels: {
			flightPlanNumber: '飞行计划编号',
			airNavigationUser: '通航用户',
			missionType: '任务性质',
			aircraftType: '机型',
			pilot: '飞行员',
			startTime: '开始时间',
			endTime: '结束时间',
			contact: '联系人',
			addressCode: '24位地址码',
			onboardEquipment: '机载设备',
			flightRules: '飞行规则',
	},
 
    }
}

(1.3)js中的methods

		//重新选择表格表头时
		refreshPic(val) {
			localStorage.setItem('planColSelect', JSON.stringify(val));
			this.colSelect = JSON.parse(localStorage.getItem('planColSelect'));
		},

（2）写table表

（2.1）html代码

<el-table :data="tableData" style="width: 100%; height: 100%" border :cell-style="customCellStyle" :header-cell-style="customHeaderCellStyle">
		<el-table-column label="序号" type="index" align="center" width="50">
         el-table-column>
		<el-table-column :label="item" :key="'key' + item + index" v-for="(item, index) in colSelect" :prop="getProp(item)">el-table-column>
el-table>

（2）js中的method写：

getProp(item) {
			// 遍历 columnLabels 对象，查找匹配的属性名
			for (const prop in this.columnLabels) {
				if (this.columnLabels[prop] === item) {
					return prop; // 返回匹配的属性名
				}
			}
			// 如果未找到匹配项，返回 null 或其他适当的值
			return null;
		},

（3）页面所有代码（无接口，可以直接用）