问题形容
假如有这样一个需要,就是咱们有数据表格,用来记录学生是否处于上学和辍学的状态。辍学的状态加上个背景色,作为揭示。最终成果如下图
代码附上
<template>
<div id="app">
<el-table
:data="tableData"
border
:header-cell-style="{background: '#fafafa', color: '#333', fontWeight: '600', fontSize: '14px',}"style="width: 541px":row-style="TableRowStyle"
>
<el-table-column prop="name" label="姓名" width="180"> </el-table-column>
<el-table-column prop="age" label="年龄" width="180"> </el-table-column>
<el-table-column prop="school" label="是否上学" width="180"> </el-table-column>
</el-table>
</div>
</template>
<script>
export default {
name: "app",
data() {
return {
tableData: [
{
name: "孙悟空",
age: 500,
school: "上学中",
},
{
name: "猪八戒",
age: 88,
school: "已辍学",
},
{
name: "沙僧",
age: 1000,
school: "已辍学",
},
{
name: "唐僧",
age: 99999,
school: "上学中",
},
],
};
},
methods: {
// 当状态为 已辍学 的状态,加上背景色
TableRowStyle({row, rowIndex}) {
// 留神,这里返回的是一个对象
let rowBackground = {};
if (row.school.includes("辍学") ) {
rowBackground.background = "pink";
return rowBackground;
}
},
},
};
</script>
总结
好忘性不如烂笔头