Vue+ElementUI中修改el-table表格符合条件的某一列/某个属性的单元格样式(背景色、字号等
先看效果图:根据某项属性确定高亮哪一列或几列的单元格。根据elemenUI中 table组件的可修改属性来配置cell-style<el-tableref="multipleTable":data="tableData"v-loading="loading":cell-style="abnormal_columnStyle":header-cell-style="{'padding':'0
·
先看效果图:
根据某项属性确定高亮哪一列或几列的单元格。
根据elemenUI中 table组件的可修改属性来配置 cell-style
<el-table
ref="multipleTable"
:data="tableData"
v-loading="loading"
:cell-style="abnormal_columnStyle"
:header-cell-style="{'padding':'0 5px', 'text-align': 'center' }"
tooltip-effect="dark"
style="width: 100%"
>
<el-table-column prop="abnormal_type" label="异常类型" min-width="120">
<template slot-scope="scope">
<span :style="abnormal_typeText(scope.row.abnormal_type).style">● </span>
{{ abnormal_typeText(scope.row.abnormal_type).text }}
</template>
</el-table-column>
<el-table-column prop="check_count" label="次数" min-width="60">
</el-table-column>
<el-table-column prop="region" label="省份" width="">
</el-table-column>
<el-table-column prop="city" label="城市" width="">
</el-table-column>
<el-table-column prop="nickname" label="用户" width="">
</el-table-column>
</el-table>
把回调的函数写在computed,利用缓存
abnormal_columnStyle() {
return function(row, column, rowIndex, columnIndex) {
const style = {
times: {
'backgroundColor':'#ff5b5b','text-align':'center','font-weight':'bold','color':'#fff'},
person: {'backgroundColor':'#db639b','text-align':'center','font-weight':'bold','color':'#fff'},
area: {'backgroundColor':'#ea9b17','text-align':'center','font-weight':'bold','color':'#fff'},
all: {'text-align':'center',},
}
if (row.column.property == 'nickname') {
if (row.row.abnormal_type == 'person') {
return style[row.row.abnormal_type]
}else{
return style['all']
}
} else if (row.column.property == 'region'||row.column.property == 'city') {
if (row.row.abnormal_type == 'area') {
return style[row.row.abnormal_type]
}else{
return style['all']
}
}else if (row.column.property == 'check_count') {
if (row.row.abnormal_type == 'times') {
return style[row.row.abnormal_type]
}else{
return style['all']
}
}else{
return style['all']
}
}
},
更多推荐
已为社区贡献7条内容
所有评论(0)