el-table 判断
时间: 2023-11-07 07:03:54 浏览: 46
el-table 判断每一行的样式通过 row-class-name 来制定。你可以在 el-table 标签中加入 row-class-name 属性,并将其值设置为一个函数名或一个返回样式类名的函数。这个函数会接收每一行的数据作为参数,你可以根据数据的不同来返回不同的样式类名,从而实现每一行的样式定制。
示例代码如下:
```html
<el-table :data="tableData" style="width: 100%" :row-class-name="getRowClassName">
<el-table-column prop="date" label="Date" width="180"></el-table-column>
<el-table-column prop="name" label="Name" width="180"></el-table-column>
<el-table-column prop="address" label="Address"></el-table-column>
</el-table>
```
然后在 Vue 实例中定义 getRowClassName 函数来根据数据返回样式类名:
```javascript
methods: {
getRowClassName(row) {
// 根据 row 的属性进行判断,并返回样式类名
if (row.condition === 'A') {
return 'class-a';
} else if (row.condition === 'B') {
return 'class-b';
} else {
return 'class-default';
}
}
}
```
在 CSS 中定义对应的样式类:
```css
.class-a {
background-color: red;
color: white;
}
.class-b {
background-color: yellow;
color: black;
}
.class-default {
/* 默认样式 */
}
```
这样就能根据每一行数据的不同条件来给 el-table 的行添加不同的样式了。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)