el-table怎么使用cell-class-name

`el-table` 组件可以通过 `cell-class-name` 属性动态设置单元格的 class 名称。这个属性需要绑定一个函数，该函数接收三个参数：`{row, column, rowIndex, columnIndex}`，分别表示当前单元格所在的行数据、列数据、行索引和列索引。

下面是一个示例：

<el-table :data="tableData">
  <el-table-column prop="name" label="Name" />
  <el-table-column prop="age" label="Age" />
  <el-table-column prop="address" label="Address" />
  <el-table-column label="Operation">
    <template slot-scope="scope">
      <el-button type="text" @click="deleteRow(scope.$index)">Delete</el-button>
    </template>
  </el-table-column>
  <el-table-column prop="score" label="Score" :cell-class-name="setCellClassName" />
</el-table>

export default {
  data() {
    return {
      tableData: [
        { name: 'John', age: 18, address: 'New York', score: 90 },
        { name: 'Tom', age: 22, address: 'London', score: 80 },
        { name: 'Lucy', age: 20, address: 'Paris', score: 85 },
      ],
    };
  },
  methods: {
    setCellClassName({ row, column, rowIndex, columnIndex }) {
      if (rowIndex % 2 === 0) {
        // 偶数行的单元格添加背景色
        return 'even-row';
      } else {
        // 奇数行的单元格添加边框
        return 'odd-row';
      }
    },
    deleteRow(index) {
      this.tableData.splice(index, 1);
    },
  },
};

在上面的示例中，我们为 `tableData` 数组中的每个对象添加了一个 `score` 属性，并将其绑定到了 `el-table-column` 组件的 `prop` 属性上。然后我们在第四个 `el-table-column` 组件中使用了 `cell-class-name` 属性，并将其绑定到了 `setCellClassName` 方法上。`setCellClassName` 方法根据当前单元格所在的行索引，来动态地设置单元格的 class 名称。这样，在渲染表格时，奇数行的单元格会有一个 `odd-row` 的边框样式，而偶数行的单元格会有一个 `even-row` 的背景色样式。

希望这个示例可以帮助您理解 `el-table` 组件的 `cell-class-name` 属性的用法。