el-table懒加载设置单元格样式

在Vue.js的Element UI库中的`el-table`组件中，如果你想要实现懒加载并且同时设置单元格的样式，可以结合`cell-style`属性和`load`选项一起使用。`cell-style`允许你在渲染每一行的单元格时动态应用CSS样式，而`load`则用于异步加载表格的数据。

首先，在你的数据结构中，为需要懒加载的部分添加一个标识字段，比如`loading`标志：

data() {
  return {
    loadingData: { id: '...', loading: true, content: null }, // 模拟数据对象
    tableData: [
      ... // 其他非懒加载数据
      { ...this.loadingData },
      ... // 更多数据
    ]
  };
}

然后在模板中，你可以这样设置`cell-style`：

<el-table :data="tableData" :lazy="true">
  <el-table-column prop="content" label="内容" cell-style="{ background: loadingData.loading ? '#f0f0f0' : '' }"></el-table-column>
  <!-- ...其他列... -->
</el-table>

在这个例子中，如果`loadingData.loading`为`true`，那么该单元格的背景颜色会变为灰色表示正在加载。当数据加载完成后，`loadingData.loading`变为`false`，单元格样式就会恢复。