vxe-grid cell-class-name
时间: 2023-10-29 14:05:10 浏览: 205
Vxe Table/Grid 单元格分组合并
vxe-grid 是一个基于 Vue.js 的表格组件库,cell-class-name 是其中一个属性,用于设置单元格的类名。通过指定该属性,可以为单元格设置自定义的样式,例如:
```
<vxe-grid :data="tableData">
<vxe-column field="name" title="姓名"></vxe-column>
<vxe-column field="age" title="年龄"></vxe-column>
<vxe-column field="gender" title="性别" :cell-class-name="cellClassName"></vxe-column>
</vxe-grid>
...
methods: {
cellClassName({ row }) {
return row.gender === '男' ? 'male' : 'female'
}
}
```
以上代码中,通过传入 cellClassName 方法来动态设置每个单元格的类名,根据行数据中的 gender 字段的值来判断男女,并返回相应的类名。这样就能为每个单元格设置不同的样式。
阅读全文