el-table cell-style

The `el-table` component in Element UI provides a `cell-style` attribute that allows you to apply custom styles to individual cells in the table. This attribute accepts a function that takes two arguments: `row` and `column`. The `row` argument represents the current row data, and the `column` argument represents the current column configuration.

Here is an example of how to use the `cell-style` attribute:

<template>
  <el-table :data="tableData">
    <el-table-column prop="name" label="Name">
      <template slot-scope="scope">
        <div :style="getCellStyle(scope.row, scope.column)">
          {{ scope.row.name }}
        </div>
      </template>
    </el-table-column>
    <el-table-column prop="age" label="Age">
      <template slot-scope="scope">
        <div :style="getCellStyle(scope.row, scope.column)">
          {{ scope.row.age }}
        </div>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: 'John', age: 25 },
        { name: 'Jane', age: 30 },
        { name: 'Bob', age: 40 },
      ],
    };
  },
  methods: {
    getCellStyle(row, column) {
      if (column.property === 'age' && row.age > 30) {
        return { color: 'red' };
      }
      return {};
    },
  },
};
</script>

In this example, we define a custom `getCellStyle` method that checks if the current column is the `age` column and if the current row's age is greater than 30. If so, we return a style object with a red color. Otherwise, we return an empty object. We then use this method in the `cell-style` attribute for each cell in the table.