国产无码综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

el-table表格設置——動態(tài)修改表頭

2年前作者：Rrar分類：Toy博客閱讀(96)違法舉報

這篇具有很好參考價值的文章主要介紹了el-table表格設置——動態(tài)修改表頭。希望對大家有所幫助。如果存在錯誤或未考慮完全的地方，請大家不吝賜教，您也可以點擊"舉報違法"按鈕提交疑問。

el-table表格設置——動態(tài)修改表頭,vue.js,前端,javascript

(1) 首先是form表單寫表單設置按鈕：

el-table表格設置——動態(tài)修改表頭,vue.js,前端,javascript

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

el-table表格設置——動態(tài)修改表頭,vue.js,前端,javascript

<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

el-table表格設置——動態(tài)修改表頭,vue.js,前端,javascript

data(){
    return{
        colOptions: ['飛行計劃編號', '通航用戶', '任務性質', '機型', '飛行員', '開始時間', '結束時間', '聯(lián)系人', '24位地址碼', '機載設備', '飛行規(guī)則'],
		// 已選中的表頭:默認顯示內容
		colSelect: [],
		// 默認選擇的
		colSelectToday: ['飛行計劃編號', '通航用戶', '任務性質', '機型', '飛行員', '開始時間'],
		// 主要是為了獲取table的prop
		columnLabels: {
			flightPlanNumber: '飛行計劃編號',
			airNavigationUser: '通航用戶',
			missionType: '任務性質',
			aircraftType: '機型',
			pilot: '飛行員',
			startTime: '開始時間',
			endTime: '結束時間',
			contact: '聯(lián)系人',
			addressCode: '24位地址碼',
			onboardEquipment: '機載設備',
			flightRules: '飛行規(guī)則',
	},

    }
}

(1.3)js中的methods

el-table表格設置——動態(tài)修改表頭,vue.js,前端,javascript

		//重新選擇表格表頭時
		refreshPic(val) {
			localStorage.setItem('planColSelect', JSON.stringify(val));
			this.colSelect = JSON.parse(localStorage.getItem('planColSelect'));
		},

（2）寫table表

（2.1）html代碼

el-table表格設置——動態(tài)修改表頭,vue.js,前端,javascript

<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寫：

el-table表格設置——動態(tài)修改表頭,vue.js,前端,javascript 文章來源地址http://www.zghlxwxcb.cn/news/detail-741362.html

getProp(item) {
			// 遍歷 columnLabels 對象，查找匹配的屬性名
			for (const prop in this.columnLabels) {
				if (this.columnLabels[prop] === item) {
					return prop; // 返回匹配的屬性名
				}
			}
			// 如果未找到匹配項，返回 null 或其他適當?shù)闹?			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="計劃狀態(tài)："></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-picker
						v-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: ['飛行計劃編號', '通航用戶', '任務性質', '機型', '飛行員', '開始時間', '結束時間', '聯(lián)系人', '24位地址碼', '機載設備', '飛行規(guī)則'],
			// 已選中的表頭:默認顯示內容
			colSelect: [],
			// 默認選擇的
			colSelectToday: ['飛行計劃編號', '通航用戶', '任務性質', '機型', '飛行員', '開始時間'],
			// 主要是為了獲取table的prop
			columnLabels: {
				flightPlanNumber: '飛行計劃編號',
				airNavigationUser: '通航用戶',
				missionType: '任務性質',
				aircraftType: '機型',
				pilot: '飛行員',
				startTime: '開始時間',
				endTime: '結束時間',
				contact: '聯(lián)系人',
				addressCode: '24位地址碼',
				onboardEquipment: '機載設備',
				flightRules: '飛行規(guī)則',
			},
		};
	},
	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 或其他適當?shù)闹?			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>

到了這里，關于el-table表格設置——動態(tài)修改表頭的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！

本文來自互聯(lián)網(wǎng)用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。如若轉載，請注明出處：如若內容造成侵權/違法違規(guī)/事實不符，請點擊違法舉報進行投訴反饋，一經(jīng)查實，立即刪除！

分享到：

領支付寶紅包贊助服務器費用

vue2/3 - 基于element(ui/plus)實現(xiàn)el-table表格每行可拖動換位置排序，表格列（表頭）可拖動交換位置功能效果（table表格可拖曳排序的行和列，用鼠標動態(tài)拖拽排序表格行列）
在vue2、vue3項目開發(fā)中，element餓了么組件庫實現(xiàn)表格el-table組件支持【行和列可拖曳排序、換位置】功能，每行數(shù)據(jù)可拖拽進行排序調換位置，每列數(shù)據(jù)可以自由拖動進行調換位置。提供詳細示例代碼，復制源碼換個數(shù)據(jù)就能用了。
2024年04月13日
瀏覽(29)
vue3中el-table實現(xiàn)多表頭并表格合并行或列
1、el-table中添加事件?:span-method=\\\"genderSpanCity\\\" 2、js添加函數(shù) 效果圖為
2024年01月23日
瀏覽(28)
前端vue+elementui導出復雜（單元格合并，多級表頭）表格el-table轉為excel導出
需求：前端對el-table表格導出插件： npm install xlsx -S npm install file-saver --save 原理：直接導出el-table的表格里面的數(shù)據(jù)，這樣就會存在缺點，只會導出當前頁面的數(shù)據(jù)，如果需要導出全部數(shù)據(jù)，可以自己重新渲染一個全部數(shù)據(jù)不可見的el-table表格，來導出就可以了擴展：經(jīng)過
2024年02月04日
瀏覽(31)
Vue 中 Element UI 的 el-table 組件實現(xiàn)動態(tài)表頭和內容
在 Vue 中使用 Element UI 的 el-table 組件時，為了實現(xiàn)動態(tài)表頭（包括第一層表頭及其下的嵌套表頭或子表頭）。需要后端返回的數(shù)據(jù)結構能夠體現(xiàn)表頭層級關系以及對應的數(shù)據(jù)結構相匹配。這樣的數(shù)據(jù)通常是一個嵌套數(shù)組，每個表頭單元可能包含自身的列信息以及它的子表頭和
2024年01月20日
瀏覽(31)
Vue+el-table 修改表格單元格橫線邊框顏色及表格空數(shù)據(jù)時邊框顏色
找到對應的css樣式進行修改
2024年04月11日
瀏覽(29)
【vue】element-ui、el-table使用V-for循環(huán)動態(tài)添加表頭和數(shù)據(jù)
參考鏈接 https://blog.csdn.net/xz1589155358/article/details/126597271
2024年02月11日
瀏覽(28)
【Vue/element】 el-table實現(xiàn)表格動態(tài)新增/插入/刪除表格行，可編輯單元格
效果如下：點擊“新增一行”可以在表格最后新增一行，單元格內容可編輯點擊綠色+按鈕，可在指定行的后面插入一行點擊紅色-按鈕，可以刪除指定行原理：表格 el-table 是通過動態(tài)循環(huán) tableData 生成，只要對 tableData 數(shù)組進行增加刪除元素，就可以達到效果這里用了ele
2024年02月16日
瀏覽(35)
el-table 表頭設置漸變色
?
2024年02月15日
瀏覽(25)
el-table動態(tài)表頭與模擬請求數(shù)據(jù)
模擬請求數(shù)據(jù)
2024年02月07日
瀏覽(49)
el-table 實現(xiàn)動態(tài)表頭靜態(tài)內容根據(jù)數(shù)據(jù)顯示動態(tài)輸入框
直接放代碼了
2024年02月12日
瀏覽(27)

<mark id="yio3n"></mark>

<kbd id="yio3n"></kbd>

<mark id="yio3n"><font id="yio3n"></font></mark>

<input id="yio3n"></input>