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

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

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

					
						
					
					表格设置
				

（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代码

（2）js中的method写：

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

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