遇到一个需要根据报警级别来区分table数据的需求,一开始的想法是改变字体颜色,看了下ele文档,有个cell-style的属性,可以通过回调,返回样式。感觉so easy
那就来吧,直接上代码
界面部分
<template>
<div class="app-container">
<div class="filter-container" >
<el-button class="filter-item" type="success" >全部处理</el-button>
</div>
<el-table :data="tableData" tooltip-effect="dark" @selection-change="handleSelectionChange" :cell-style="cellStyle" border fit highlight-current-row>
<el-table-column type="selection" width="55" :selectable="isDisabled"></el-table-column>
<el-table-column label="确认" align="center" width="80">
<template slot-scope="scope">
<el-button type="success" size="mini" :disabled="scope.row.confirm" @click="confirmHandle(scope.row.pointId)"> {{scope.row.confirm?'已确认':'确认'}}</el-button>
</template>
</el-table-column>
<el-table-column label="详情" align="center" width="80">
<template slot-scope="scope">
<el-button type="primary" size="mini" >详情</el-button>
</template>
</el-table-column>
<el-table-column prop="alarmLevel" label="告警级别" align="center" show-overflow-tooltip></el-table-column>
<el-table-column prop="area" label="区域" align="center"></el-table-column>
<el-table-column prop="equip" label="设备" align="center" show-overflow-tooltip></el-table-column>
<el-table-column prop="pointName" label="测点" align="center" show-overflow-tooltip></el-table-column>
<el-table-column prop="limit" label="限值" align="center" show-overflow-tooltip></el-table-column>
<el-table-column prop="alarmValue" label="报警值" align="center" show-overflow-tooltip></el-table-column>
<el-table-column prop="alarmTime" label="报警时间" align="center" show-overflow-tooltip></el-table-column>
</el-table>
</div>
</template>
js部分
<script>
export default {
data() {
return {//初始数据变量
tableData: [{
confirm:true,
alarmLevel:"紧急告警",
area:"北京市昌平区",
equip:"昌平气象采集",
pointId:1,
pointName:"温度",
limit:"35",
alarmValue:"41",
alarmTime:"2019-6-1 12:00:00",
},{
confirm:false,
alarmLevel:"一般告警",
area:"北京市朝阳区",
equip:"昌平光感采集",
pointId:2,
pointName:"紫外线",
limit:"60",
alarmValue:"61",
alarmTime:"2019-6-1 12:00:00",
},
{
confirm:false,
alarmLevel:"紧急告警",
area:"北京市朝阳区",
equip:"昌平光感采集",
pointId:3,
pointName:"紫外线",
limit:"60",
alarmValue:"61",
alarmTime:"2019-6-1 12:00:00",
}],
multipleSelection: []
}
},
methods: {
handleSelectionChange(val) {//复选框选中操作
console.log(val);
},
cellStyle(row,column,rowIndex,columnIndex){//根据报警级别显示颜色
// console.log(row);
// console.log(row.column);
if(row.column.label==="告警级别"&& row.row.alarmLevel==="紧急告警"){
return 'color:red'
}else if(row.column.label==="告警级别"&& row.row.alarmLevel==="一般告警" ){
return 'color:yellow'
}
}
}
}
</script>
完成后的界面是这样婶的,感觉完全ok
后来一看字体不太清楚啊,加上颜色,盯了几秒,感觉近视又加深了啊,哈,那就换个思路,我就想试着让一行数据变背景色,只需要修改cellstyle方法中的if判断就可以了
cellStyle(row,column,rowIndex,columnIndex){//根据报警级别显示颜色
// console.log(row);
// console.log(row.column);
if(row.row.alarmLevel==="紧急告警"){
return 'background:red'
}else if(row.row.alarmLevel==="一般告警" ){
return 'background:yellow'
}
}
修改后的界面是这样婶的,没错,你没看错就这么高调,我要被亮瞎了
行吧,为了不被打死,那就缩小范围,只高亮报警级别这一项,继续修改if
cellStyle(row,column,rowIndex,columnIndex){//根据报警级别显示颜色
// console.log(row);
// console.log(row.column);
if(row.column.label==="告警级别"&& row.row.alarmLevel==="紧急告警"){
return 'background:red'
}else if(row.column.label==="告警级别"&& row.row.alarmLevel==="一般告警" ){
return 'background:yellow'
}
}
完事,是这样婶的
嗯,不愧是我写的页面,一如既往地亮眼,没有ui果然是件很蛋疼的事啊,至此功能最起码实现了
小弟刚学vue+ele,有问题的地方欢迎大佬们随时指正,告辞