vue.js 前端 javascript 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）页面所有代码（无接口，可以直接用）

推荐链接