使用elementUI的表格table給列添加樣式
更新時間:2023年10月25日 09:10:03 作者:跳跳的小古風
這篇文章主要介紹了使用elementUI的表格table給列添加樣式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
需求
針對數字指標點擊時選中圖標并高亮,再次點擊時取消選中圖標,取消高亮
同時點擊行時放開列高亮 點擊列時放開行高亮
解決思路及方案
該element表格目前只有直接行點擊高亮函數 所以我們使用
@header-click+:header-cell-class-name+:class-name實現對表頭圖標和列的樣式改變
通過點擊表格頭時對指定數據進行更改來渲染樣式類
<el-table :data="saveTableData.tableData" :key="datarefersh" //通過改變此屬性進行數據重新渲染 @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,//根據點擊表頭時將表頭的code值賦值給choose進行判斷 datarefersh: true, } init(){ this.eleTable.headerData.map(o => { o.current = false;//初始化時將渲染的表頭每一項添加current屬性,列根據current判斷是否點擊,從而高亮它 }); }, //點擊行事件 handleCurrentRowChange(val) { this.table.selectedColumn={} //清空列數據 let list = false; //判斷是否有列選中 this.eleTable.headerData.map(o => { if (o.current === true) { list = true; } }); if (list === true) { //有列選中時,將列的current屬性重置為false this.eleTable.headerData.map(o => { o.current = false; }); this.datarefersh = !this.datarefersh; setTimeout(() => { this.$refs["table"].setCurrentRow(val); this.choose=0//將表格頭圖標選中狀態(tài)也重置 this.table.selectedRow = val; }, 100); } else { this.table.selectedRow = val; } }, //點擊表頭事件 handleHeaderClick(column, event) { this.table.selectedRow={} //清空行數據 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; } } } }, //表頭函數類 handlemyclass: function({ column}) { let text=[] //動態(tài)給表格頭是數字屬性的添加未選中圖標 for(var i in this.saveTableData.tableData[0]){ if(typeof(this.saveTableData.tableData[0][i])==="number"){ text.push(i) } } //不在數字指標數組內的執(zhí)行testB類,只高亮 //在指標內且choose為當前的選中code的執(zhí)行選中類(testC),不是當前選中的執(zhí)行未選中內testA if (text.includes(column.columnKey)) { return this.choose===column.columnKey?"testC":"testA"; } else { return "testB"; } }, //第二種方法 //點擊表頭事件 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 ) { //指標運算的列不參與單列運算 return; } //數字指標 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; }
總結
以上為個人經驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
詳解Vue3 Composition API中的提取和重用邏輯
這篇文章主要介紹了Vue3 Composition API中的提取和重用邏輯,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2020-04-04