问题形容
假如有这样一个需要，就是咱们有数据表格，用来记录学生是否处于上学和辍学的状态。辍学的状态加上个背景色，作为揭示。最终成果如下图
代码附上
<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>总结
好忘性不如烂笔头