亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

使用elementUI的表格table給列添加樣式

 更新時(shí)間:2023年10月25日 09:10:03   作者:跳跳的小古風(fēng)  
這篇文章主要介紹了使用elementUI的表格table給列添加樣式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

需求

針對(duì)數(shù)字指標(biāo)點(diǎn)擊時(shí)選中圖標(biāo)并高亮,再次點(diǎn)擊時(shí)取消選中圖標(biāo),取消高亮

同時(shí)點(diǎn)擊行時(shí)放開(kāi)列高亮 點(diǎn)擊列時(shí)放開(kāi)行高亮

解決思路及方案

該element表格目前只有直接行點(diǎn)擊高亮函數(shù) 所以我們使用

@header-click+:header-cell-class-name+:class-name實(shí)現(xiàn)對(duì)表頭圖標(biāo)和列的樣式改變

通過(guò)點(diǎn)擊表格頭時(shí)對(duì)指定數(shù)據(jù)進(jìn)行更改來(lái)渲染樣式類

	<el-table
		:data="saveTableData.tableData"
		:key="datarefersh" //通過(guò)改變此屬性進(jìn)行數(shù)據(jù)重新渲染
		@header-click="handleHeaderClick"
		highlight-current-row
		@current-change="handleCurrentRowChange"
		ref="table"
		:header-cell-class-name="handlemyclass"
		>
			<el-table-column
				:render-header="labelHead"
				v-for="(item, index) in eleTable.headerData"
				:column-key="item.idenCode"
				:prop="item.idenCode"
				:label="item.idenName"
				:key="index"
				:idenType="item.idenType"
				:class-name="item.current ? 'cellSelected' : ''"
				></el-table-column>
             </el-table>
 	         data() {  
 	            choose:0,//根據(jù)點(diǎn)擊表頭時(shí)將表頭的code值賦值給choose進(jìn)行判斷
 	             datarefersh: true,
 	        }
             init(){
                this.eleTable.headerData.map(o => {
				o.current = false;//初始化時(shí)將渲染的表頭每一項(xiàng)添加current屬性,列根據(jù)current判斷是否點(diǎn)擊,從而高亮它
				});
             },
            //點(diǎn)擊行事件
            handleCurrentRowChange(val) {
		     	this.table.selectedColumn={} //清空列數(shù)據(jù)
				let list = false;
				//判斷是否有列選中
				this.eleTable.headerData.map(o => {
					if (o.current === true) {
						list = true;
					}
				});
				
				if (list === true) {
				    //有列選中時(shí),將列的current屬性重置為false
					this.eleTable.headerData.map(o => {
						o.current = false;
					});
					this.datarefersh = !this.datarefersh;
					setTimeout(() => {
						this.$refs["table"].setCurrentRow(val);
						this.choose=0//將表格頭圖標(biāo)選中狀態(tài)也重置
						this.table.selectedRow = val;
					}, 100);
				} else {
					 this.table.selectedRow = val;
				}
			},
			//點(diǎn)擊表頭事件
			handleHeaderClick(column, event) {
				this.table.selectedRow={} //清空行數(shù)據(jù)
				let idenCode = column.property;
				for (let i in this.eleTable.headerData) {
				if (this.eleTable.headerData[i].idenCode == idenCode) {
				//該列為選中的列
					let headData = this.eleTable.headerData[i];
				if (this.table.selectedColumn.property == idenCode) {
						//取消選擇
						this.table.selectedColumn = {};
						headData.current = false;
						this.choose=0
						this.datarefersh = !this.datarefersh;
				} else {
						this.table.selectedColumn = column;
						headData.current = true;
						this.choose=column.property
						this.datarefersh = !this.datarefersh;
				   }
		    	} else {
						return;
						}
					}
				}
			},
	//表頭函數(shù)類
			handlemyclass: function({ column}) 
			 {
			let text=[]
				//動(dòng)態(tài)給表格頭是數(shù)字屬性的添加未選中圖標(biāo)
			for(var i in this.saveTableData.tableData[0]){
			if(typeof(this.saveTableData.tableData[0][i])==="number"){
					text.push(i)
				}		 
			}
		//不在數(shù)字指標(biāo)數(shù)組內(nèi)的執(zhí)行testB類,只高亮
		//在指標(biāo)內(nèi)且choose為當(dāng)前的選中code的執(zhí)行選中類(testC),不是當(dāng)前選中的執(zhí)行未選中內(nèi)testA
			if (text.includes(column.columnKey)) {
	           return   this.choose===column.columnKey?"testC":"testA";
				} else {
			 return "testB";
				}		
			},
//第二種方法
			//點(diǎn)擊表頭事件
			handleHeaderClick(column, event) {
				let idenCode = column.property;
				for (let i in this.eleTable.headerData) {
					if (this.eleTable.headerData[i].idenCode == idenCode) {
						let headData = this.eleTable.headerData[i];
						if (headData.idenType == 2) {
							if (
								headData.hasOwnProperty("isIndCalculate") &&
								headData.isIndCalculate
							) {
								//指標(biāo)運(yùn)算的列不參與單列運(yùn)算
								return;
							}
							//數(shù)字指標(biāo)
							let th = "";
							if ($(event.target).hasClass("is-leaf")) {
								th = $(event.target);
							} else {
								th = $(event.target)
									.parent()
									.parent();
							}
							let className = $(th).attr("class");
							let newName=className.replace("el-table__cell", "");
							let newclassName = newName.replace("is-leaf", "");
							$(".tableLayer tr th, .tableLayer tr td").removeClass("active");
							if (this.table.selectedColumn.property == idenCode) {
								//取消選擇
								this.table.selectedColumn = {};
								headData.current = false;
							} else {
								this.table.selectedColumn = column;
								$("." + newclassName).addClass("active");
							}
						} else {
							return;
						}
					}
				}
			},
	.testA,.testB,.testC {
		background: #257ac1!important;
		color: "#fff";
	}
	.testA::before{
		display: block;
		content: '';
		background: url("../../../../../../assets/select-bg/setA.png") no-repeat;
		background-size: 100% 100%;
		position: absolute;
       right: 8px;
       top: 12px;
       width: 12px;
       height: 12px;
	}
		.testC::before{
		display: block;
		content: '';
		background: url("../../../../../../assets/select-bg/setB.png") no-repeat;
		background-size: 100% 100%;
		position: absolute;
    right: 8px;
    top: 12px;
    width: 12px;
    height: 12px;
	}

總結(jié)

以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。

相關(guān)文章

  • vue3-pinia-ts項(xiàng)目中的使用示例詳解

    vue3-pinia-ts項(xiàng)目中的使用示例詳解

    這篇文章主要介紹了vue3-pinia-ts項(xiàng)目中的使用,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2022-08-08
  • Vue.js實(shí)現(xiàn)分頁(yè)查詢功能

    Vue.js實(shí)現(xiàn)分頁(yè)查詢功能

    這篇文章主要為大家詳細(xì)介紹了Vue.js實(shí)現(xiàn)分頁(yè)查詢功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2017-11-11
  • 在Vue中使用mockjs代碼實(shí)例

    在Vue中使用mockjs代碼實(shí)例

    這篇文章主要介紹了在Vue中使用mockjs代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
    2020-11-11
  • vue中key使用的問(wèn)題示例解析

    vue中key使用的問(wèn)題示例解析

    這篇文章主要為大家介紹了vue中key使用的問(wèn)題示例解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-11-11
  • 詳解Vue3 Composition API中的提取和重用邏輯

    詳解Vue3 Composition API中的提取和重用邏輯

    這篇文章主要介紹了Vue3 Composition API中的提取和重用邏輯,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2020-04-04
  • vue實(shí)現(xiàn)靜態(tài)頁(yè)面點(diǎn)贊和取消點(diǎn)贊功能

    vue實(shí)現(xiàn)靜態(tài)頁(yè)面點(diǎn)贊和取消點(diǎn)贊功能

    這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)靜態(tài)頁(yè)面點(diǎn)贊和取消點(diǎn)贊的功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-02-02
  • JavaScript 沙箱探索

    JavaScript 沙箱探索

    這篇文章主要介紹了JavaScript 沙箱探索,沙箱是基于 event bus 形式的通信實(shí)現(xiàn)上層的功能,文章的例子選擇接口實(shí)現(xiàn)了 web worker 與 quickjs 的 EventEmitter,,需要的朋友可以參考一下
    2021-10-10
  • vue中插件和組件的區(qū)別點(diǎn)及用法總結(jié)

    vue中插件和組件的區(qū)別點(diǎn)及用法總結(jié)

    在本篇文章里小編給大家分享的是一篇關(guān)于vue中插件和組件的區(qū)別點(diǎn)及用法總結(jié)內(nèi)容,有興趣的的朋友們可以學(xué)習(xí)下。
    2021-12-12
  • vue源碼之批量異步更新策略的深入解析

    vue源碼之批量異步更新策略的深入解析

    這篇文章主要給大家介紹了關(guān)于vue源碼之批量異步更新策略的相關(guān)資料,關(guān)于vue異步更新是我們?nèi)粘i_(kāi)發(fā)中經(jīng)常遇到的一個(gè)功能,需要的朋友可以參考下
    2021-05-05
  • vue中mint-ui環(huán)境搭建詳細(xì)介紹

    vue中mint-ui環(huán)境搭建詳細(xì)介紹

    這篇文章主要介紹了vue中mint-ui環(huán)境搭建詳細(xì)介紹的相關(guān)資料,需要的朋友可以參考下
    2017-04-04

最新評(píng)論