使用elementUI的表格table给列添加样式
作者：跳跳的小古风
这篇文章主要介绍了使用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//将表格头图标选中状态也重置
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=[]
//动态给表格头是数字属性的添加未选中图标
for(var i in this.saveTableData.tableData[0]){
if(typeof(this.saveTableData.tableData[0][i])==="number"){
text.push(i)
}
}
//不在数字指标数组内的执行testB类，只高亮
//在指标内且choose为当前的选中code的执行选中类（testC）,不是当前选中的执行未选中内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;
}
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。