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){
element表格横向滚动条list =true;
}
});
if(list ===true){
//有列选中时，将列的current属性重置为false
this.eleTable.headerData.map(o =>{
o.current =false;
});
this.datarefersh =!this.datarefersh;
setTimeout(()=>{
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.lumnKey)){
return this.choose===lumnKey?"testC":"testA";
}else{
return"testB";
}
},
.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;
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。