<el-table-column prop="remark" label="原因" align="center" :show-overflow-tooltip="true" column-key="remark" cell-class-name=‘remarkTd’
时间: 2023-07-19 19:42:09 浏览: 153
在这段代码中,我们可以看到在el-table-column组件上设置了一个cell-class-name属性,并将其值设置为'remarkTd'。这意味着在表格渲染时,会自动调用名为'remarkTd'的函数来为该列的每个单元格设置样式类名。
需要注意的是,在代码中cell-class-name属性的值应该是一个函数名,而不是一个字符串。因此,在这里应该将'remarkTd'用反引号(`)包裹起来,以转换为字符串模板,如下所示:
```html
<el-table-column prop="remark" label="原因" align="center" :show-overflow-tooltip="true" column-key="remark" :cell-class-name="`remarkTd`"></el-table-column>
```
此外,我们还需要在Vue实例的methods对象中定义一个名为'remarkTd'的函数,来为单元格设置样式类名。例如:
```javascript
methods: {
remarkTd({row, column, rowIndex, columnIndex}) {
if (row.remark === '异常情况') {
return 'remark-td-highlight';
}
}
}
```
在这个'remarkTd'函数中,我们使用了ES6的解构赋值语法,将传入的参数对象解构为row、column、rowIndex和columnIndex四个变量。然后,我们判断当前单元格对应的行数据中的'remark'字段是否为'异常情况',如果是,则返回样式类名'remark-td-highlight',否则返回undefined。这样,就可以为该列的单元格设置样式类名了。
阅读全文