elementuiplus表格cell-style用法
elementUIPlus表格组件的cell-style属性可以在每个单元格中使用自定义的样式。它可以是一个返回样式对象的函数，或者是一个接收当前行（row）和当前列（column）作为参数，返回样式对象的匿名函数。
column函数的使用
使用函数作为cell-style属性的示例代码如下：
```vue
<el-table :data="tableData" :cell->
  <el-table-column prop="name" label="姓名"></el-table-column>
  <el-table-column prop="age" label="年龄"></el-table-column>
  <el-table-column prop="address" label="地址"></el-table-column>
</el-table>
```
其中，tableData是表格的数据源，cellStyle是一个返回样式对象的函数。可以在Vue组件中定义cellStyle方法：
```javascript
methods: {
  cellStyle({ row, column }) {
    // 根据不同的行和列设置不同的样式
    if (row.age > 18 && column.property === 'name') {
      return { color: 'red' };
    }
    if (column.property === 'address') {
      return { fontWeight: 'bold' };
    }
    return {};
  }
}
```
上述示例中，如果某一行的年龄大于18岁，并且当前列是name列，则该单元格的文字颜会设置为红。如果当前列是address列，则该单元格的文字会加粗显示。如果不符合上述条件，则返回一个空的样式对象。
使用匿名函数作为cell-style属性的示例代码如下：
```vue
<el-table :data="tableData" :cell->
  <el-table-column prop="name" label="姓名"></el-table-column>
  <el-table-column prop="age" label="年龄"></el-table-column>
  <el-table-column prop="address" label="地址"></el-table-column>
</el-table>
```
上述示例中，使用了一个匿名函数来设置每个单元格的样式。这个函数接收当前行和当前列作为参数，并返回一个样式对象。在这个例子中，样式对象的backgroundColor属性会根据每一行的color属性来设置。
以上就是elementUIPlus表格组件的cell-style属性的用法。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。