使用elementUI的表格table給列添加樣式
需求
針對(duì)數(shù)字指標(biāo)點(diǎn)擊時(shí)選中圖標(biāo)并高亮,再次點(diǎn)擊時(shí)取消選中圖標(biāo),取消高亮
同時(shí)點(diǎn)擊行時(shí)放開列高亮 點(diǎn)擊列時(shí)放開行高亮
解決思路及方案
該element表格目前只有直接行點(diǎn)擊高亮函數(shù) 所以我們使用
@header-click+:header-cell-class-name+:class-name實(shí)現(xiàn)對(duì)表頭圖標(biāo)和列的樣式改變
通過點(diǎn)擊表格頭時(shí)對(duì)指定數(shù)據(jù)進(jìn)行更改來渲染樣式類
<el-table
:data="saveTableData.tableData"
:key="datarefersh" //通過改變此屬性進(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è)參考,也希望大家多多支持腳本之家。
- Vue?+?ElementUI表格內(nèi)實(shí)現(xiàn)圖片點(diǎn)擊放大效果的兩種實(shí)現(xiàn)方式
- vue elementUI table表格自定義樣式滾動(dòng)效果
- Vue+ElementUI表格狀態(tài)區(qū)分,row-class-name屬性詳解
- vue+elementui 表格分頁限制最大頁碼數(shù)的操作代碼
- elementui實(shí)現(xiàn)表格(el-table)默認(rèn)選中功能
- vue elementUi+sortable.js實(shí)現(xiàn)嵌套表格拖拽問題
- Vue+ElementUI踩坑之動(dòng)態(tài)顯示/隱藏表格的列el-table-column問題
- vue基于ElementUI動(dòng)態(tài)設(shè)置表格高度的3種方法
相關(guān)文章
vue3-pinia-ts項(xiàng)目中的使用示例詳解
這篇文章主要介紹了vue3-pinia-ts項(xiàng)目中的使用,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-08-08
詳解Vue3 Composition API中的提取和重用邏輯
這篇文章主要介紹了Vue3 Composition API中的提取和重用邏輯,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
vue實(shí)現(xiàn)靜態(tài)頁面點(diǎn)贊和取消點(diǎn)贊功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)靜態(tài)頁面點(diǎn)贊和取消點(diǎn)贊的功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-02-02
vue中插件和組件的區(qū)別點(diǎn)及用法總結(jié)
在本篇文章里小編給大家分享的是一篇關(guān)于vue中插件和組件的區(qū)別點(diǎn)及用法總結(jié)內(nèi)容,有興趣的的朋友們可以學(xué)習(xí)下。2021-12-12

