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

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

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

<el-popover id="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></el-popover>

（1.2）js代码中的data

data(){return{colOptions: ['飞行计划编号', '通航用户', '任务性质', '机型', '飞行员', '开始时间', '结束时间', '联系人', '24位地址码', '机载设备', '飞行规则'],// 已选中的表头:默认显示内容colSelect: [],// 默认选择的colSelectToday: ['飞行计划编号', '通航用户', '任务性质', '机型', '飞行员', '开始时间'],// 主要是为了获取table的propcolumnLabels: {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）页面所有代码（无接口，可以直接用）

<!--* @Author: * @Description: * @Date: 2023-10-26 17:44:08* @LastEditTime: 2023-11-02 17:28:58
-->
<template><div class="homeContainer"><el-header style="height: 90px"><el-form :inline="true" :model="dateForm" class="dateFormSearch" ref="myForm"><el-form-item label="计划状态："></el-form-item><el-form-item><el-radio-group v-model="dateForm.radio1"><el-radio :label="0" style="margin-right: 5px !important">取消</el-radio><el-radio :label="1" style="margin-right: 1rem !important">保存</el-radio></el-radio-group></el-form-item><el-form-item><el-radio-group v-model="dateForm.radio2"><el-radio :label="0" style="margin-right: 5px !important">待审批</el-radio><el-radio :label="1" style="margin-right: 1rem !important">审批</el-radio></el-radio-group></el-form-item><el-form-item label="计划编号"><el-input v-model="dateForm.planNumberInput"></el-input></el-form-item><el-form-item label="呼号"><el-input v-model="dateForm.callInput"></el-input></el-form-item><el-form-item label="机号"><el-input v-model="dateForm.machineInput"></el-input></el-form-item><el-form-item label="通航用户"><el-input v-model="dateForm.navigationUsers"></el-input></el-form-item><el-form-item label="日期" prop="date"><el-date-pickerv-model="dateForm.dateTimes"type="datetimerange"range-separator="至"start-placeholder="开始日期"end-placeholder="结束日期":picker-options="pickerOptions"format="yyyy-MM-dd HH:mm"value-format="yyyy-MM-dd HH:mm"></el-date-picker></el-form-item><el-form-item><el-button type="primary" @click="onSearch">查询</el-button></el-form-item><el-form-item><el-button>导出</el-button></el-form-item><el-form-item><el-button @click="resetForm">重置</el-button></el-form-item><el-popover id="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></el-popover></el-form></el-header><el-main class="homeMain"><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></el-main></div>
</template><script>
export default {name: 'navigationFlightPlan',data() {return {dateForm: {dateTimes: [this.$common.getMonthFirstAndLastDay().firstDay, this.$common.getMonthFirstAndLastDay().lastDay],radio1: 0,radio2: 0,planNumberInput: '',callInput: '',machineInput: '',},pickerOptions: {shortcuts: [{text: '最近一天',onClick(picker) {const end = new Date();const start = new Date();start.setTime(start.getTime() - 3600 * 1000 * 24);picker.$emit('pick', [start, end]);},},{text: '最近一个周',onClick(picker) {const end = new Date();const start = new Date();start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);picker.$emit('pick', [start, end]);},},{text: '最近一个月',onClick(picker) {const end = new Date();const start = new Date();start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);picker.$emit('pick', [start, end]);},},],onPick: ({ maxDate, minDate }) => {this.selectDate = minDate.getTime();if (maxDate) {this.selectDate = '';}},disabledDate: (time) => {if (this.selectDate !== '') {const one = 31 * 24 * 3600 * 1000;const minTime = this.selectDate - one;const maxTime = this.selectDate + one;return time.getTime() < minTime || time.getTime() > maxTime;}},},tableData: [{flightPlanNumber: 'FP001',airNavigationUser: 'User A',missionType: 'Mission 1',aircraftType: 'Type X',pilot: 'Pilot 1',startTime: '2023-10-01 08:00',endTime: '2023-10-01 10:00',contact: 'John Doe',addressCode: 'ABCDEF1234567890',onboardEquipment: 'Equipment 1',flightRules: 'Rule A',},{flightPlanNumber: 'FP002',airNavigationUser: 'User B',missionType: 'Mission 2',aircraftType: 'Type Y',pilot: 'Pilot 2',startTime: '2023-10-05 14:00',endTime: '2023-10-05 16:00',contact: 'Jane Smith',addressCode: 'XYZ1234567890ABC',onboardEquipment: 'Equipment 2',flightRules: 'Rule B',},{flightPlanNumber: 'FP003',airNavigationUser: 'User C',missionType: 'Mission 1',aircraftType: 'Type X',pilot: 'Pilot 3',startTime: '2023-10-10 10:00',endTime: '2023-10-10 12:00',contact: 'Mary Johnson',addressCode: '1234567890XYZABC',onboardEquipment: 'Equipment 3',flightRules: 'Rule A',},{flightPlanNumber: 'FP004',airNavigationUser: 'User D',missionType: 'Mission 3',aircraftType: 'Type Z',pilot: 'Pilot 4',startTime: '2023-10-15 09:00',endTime: '2023-10-15 11:00',contact: 'Robert Brown',addressCode: '7890ABCXYZ123456',onboardEquipment: 'Equipment 4',flightRules: 'Rule C',},// Add more data objects as needed],// 表格设置// 所有的选项colOptions: ['飞行计划编号', '通航用户', '任务性质', '机型', '飞行员', '开始时间', '结束时间', '联系人', '24位地址码', '机载设备', '飞行规则'],// 已选中的表头:默认显示内容colSelect: [],// 默认选择的colSelectToday: ['飞行计划编号', '通航用户', '任务性质', '机型', '飞行员', '开始时间'],// 主要是为了获取table的propcolumnLabels: {flightPlanNumber: '飞行计划编号',airNavigationUser: '通航用户',missionType: '任务性质',aircraftType: '机型',pilot: '飞行员',startTime: '开始时间',endTime: '结束时间',contact: '联系人',addressCode: '24位地址码',onboardEquipment: '机载设备',flightRules: '飞行规则',},};},mounted() {this.colSelect = this.colSelectToday;},methods: {onSearch() {console.log(this.dateForm.dateTimes);},customCellStyle({ row, column }) {return {color: 'white',backgroundColor: '#333333',border: '1px solid #616265',};},customHeaderCellStyle({ column }) {return {color: 'white',backgroundColor: '#616265',border: '1px solid #616265',fontWeight: 'bold', // 文本加粗'text-align': 'center',};},resetForm() {this.$refs.myForm.resetFields(); // 通过 ref 调用 resetFields 方法重置表单},//重新选择表格表头时refreshPic(val) {localStorage.setItem('planColSelect', JSON.stringify(val));this.colSelect = JSON.parse(localStorage.getItem('planColSelect'));},getProp(item) {// 遍历 columnLabels 对象，查找匹配的属性名for (const prop in this.columnLabels) {if (this.columnLabels[prop] === item) {return prop; // 返回匹配的属性名}}// 如果未找到匹配项，返回 null 或其他适当的值return null;},},
};
</script><style>
.homeContainer {width: 100%;height: 100%;padding: 3rem 1rem;color: white;display: flex; /* 使用Flexbox布局 */flex-direction: column; /* 垂直布局 */
}
.el-form-item__label {color: white !important;
}
.el-date-editor,
.el-range-input {background-color: #aaaaaa;color: black !important;
}
.el-icon-date,
.el-range-input::placeholder,
.el-picker-panel,
.el-date-table th,
.el-picker-panel__sidebar button {color: black !important;
}
.el-picker-panel__sidebar,
.el-picker-panel__body,
.el-input__inner,
.el-picker-panel__footer {background-color: #aaaaaa;
}
.el-input.is-disabled .el-input__inner {background-color: #aaaaaa;
}
.homeMain {flex: 1;
}
.el-table {background-color: #333333 !important;
}
/* .itemInput >>> .el-form-item__content {width: 100px !important;
} */
.el-radio__label {font-size: 1rem !important;font-family: Microsoft YaHei, Microsoft YaHei-Regular !important;
}
.el-popover--plain,
.el-checkbox__inner {background: #aaaaaa !important;
}
</style>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/158604.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

推荐彩虹知识商城源码

推荐彩虹知识商城源码

彩虹知识商城7.0.3小森升级版新增供货商开心学习版&#xff0c;新增邮件提醒功能&#xff0c;支持给用户发订单、结算等邮件通知&#xff0c;支持给管理员发送提现、域名审核等邮件通知&#xff0c;支持设置手续费最低扣除金额&#xff0c;修复了其他一些已知问题。 演示地址&…
阅读更多...
基于深度学习的目标检测算法 计算机竞赛

基于深度学习的目标检测算法 计算机竞赛

文章目录 1 简介2 目标检测概念3 目标分类、定位、检测示例4 传统目标检测5 两类目标检测算法5.1 相关研究5.1.1 选择性搜索5.1.2 OverFeat 5.2 基于区域提名的方法5.2.1 R-CNN5.2.2 SPP-net5.2.3 Fast R-CNN 5.3 端到端的方法YOLOSSD 6 人体检测结果7 最后 1 简介 &#x1f5…
阅读更多...
HTML脚本、字符实体、URL

HTML脚本、字符实体、URL

HTML脚本&#xff1a; JavaScript 使 HTML 页面具有更强的动态和交互性。 <script> 标签用于定义客户端脚本&#xff0c;比如 JavaScript。<script> 元素既可包含脚本语句&#xff0c;也可通过 src 属性指向外部脚本文件。 JavaScript 最常用于图片操作、表单验…
阅读更多...
Python+Selenium自动化测试框架详解

Python+Selenium自动化测试框架详解

什么是Selenium&#xff1f; Selenium是一个基于浏览器的自动化测试工具&#xff0c;它提供了一种跨平台、跨浏览器的端到端的web自动化解决方案。Selenium主要包括三部分&#xff1a;Selenium IDE、Selenium WebDriver 和Selenium Grid。 Selenium IDE&#xff1a;Firefox的…
阅读更多...
智能政务，办事更轻松！拓世法宝AI智慧政务数字人一体机，重新定义你的政务办理体验！

智能政务，办事更轻松！拓世法宝AI智慧政务数字人一体机，重新定义你的政务办理体验！

在构建现代化的政务服务体系中&#xff0c;高效、便捷是最重要的衡量标准。随着信息化技术的发展&#xff0c;很多政务服务已经实现了重要的线上办理&#xff0c;减轻了公民和企业的办事负担&#xff0c;同时也提升了政府部门的服务效率。可是&#xff0c;一些场景下的办事流程…
阅读更多...
安全第一！速卖通测评补单稳定的系统注意事项大盘点

安全第一！速卖通测评补单稳定的系统注意事项大盘点

对新卖家而言&#xff0c;测评并非可耻之事&#xff0c;反而是无法起步、耗费自身时间才是真正的可耻。由于速卖通新店几乎无法获得任何活动的支持&#xff0c;流量也基本没有&#xff0c;因此要在90天内达成60单的业绩对于许多卖家来说都是一项挑战。因此&#xff0c;通过快速…
阅读更多...
天津优选Java培训机构 影响Java培训费用的因素

天津优选Java培训机构 影响Java培训费用的因素

Java作为如今流行的计算机编程语言&#xff0c;其优势在于言语简略、面向对象&#xff0c;并且应用广泛。随着市场对于Java开发人员的需求越来越大&#xff0c;越来越多非本专业的人也通过培训转行进入IT行业。 Java的就业优势 市场需求大&#xff1a;Java人才的市场需求很大…
阅读更多...
制造业经营效益差？业务数据管理是关键

制造业经营效益差？业务数据管理是关键

《中国制造2025》 指出&#xff0c;目前中国制造业整体尚处于由工业2.0向工业3.0过渡的阶段&#xff0c;而欧美的制造强国已提出工业4.0概念&#xff0c;由“制造”迈向“智造”&#xff0c; 实现智能工厂、 智能生产和智能物流&#xff0c;建立一个高度灵活的个性化和数字化的…
阅读更多...
基于FPGA的图像差分运算及目标提取实现,包含testbench和MATLAB辅助验证程序

基于FPGA的图像差分运算及目标提取实现,包含testbench和MATLAB辅助验证程序

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 5.算法完整程序工程 1.算法运行效果图预览 2.算法运行软件版本 matlab2022a 3.部分核心程序 timescale 1ns / 1ps // // Company: // Engineer: // // Create Date: 2022/07/28 01:51:…
阅读更多...
虹科示波器 | 汽车免拆检修 | 2012 款上汽大众帕萨特车 发动机偶尔无法起动

虹科示波器 | 汽车免拆检修 | 2012 款上汽大众帕萨特车 发动机偶尔无法起动

一、故障现象 一辆2012款上汽大众帕萨特车&#xff0c;搭载CFB发动机&#xff0c;累计行驶里程约为12万km。车主反映&#xff0c;将点火开关置于起动挡&#xff0c;偶尔只能听到“咔哒”一声&#xff0c;起动机没有反应&#xff0c;类似蓄电池亏电时起动发动机的现象。为此&…
阅读更多...
Qt 插件开发详解

Qt 插件开发详解

1.简介 Qt插件是一种扩展机制&#xff0c;用于将应用程序的功能模块化&#xff0c;并且可以在运行时动态加载和卸载。Qt框架为插件提供了一套标准的接口和管理机制&#xff0c;使得插件的使用和集成变得简单和灵活&#xff0c;通过插件机制&#xff0c;可以将应用程序的功能划…
阅读更多...
工程项目需求与设计（小型企业网）

工程项目需求与设计（小型企业网）

工程项目需求 有一家刚成立的公司&#xff0c;租用了四间办公室&#xff0c;需要建设公司的内部网络&#xff0c;其中总经理办公室有4台电脑&#xff0c;综合办公室有四台电脑和一台服务器&#xff0c;技术部门有31台电脑&#xff0c;市场部门有17台电脑&#xff0c;公司要求在…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023