el-table 某个单元格 高亮

在Vue.js中使用Element UI的el-table组件时，如果需要某个单元格高亮，可以通过以下几种方法实现：

1. 使用`:cell-style`属性：

<el-table :data="tableData" :cell-style="cellStyle">
  <el-table-column prop="date" label="日期"></el-table-column>
  <el-table-column prop="name" label="姓名"></el-table-column>
  <el-table-column prop="address" label="地址"></el-table-column>
</el-table>

<script>
export default {
  data() {
    return {
      tableData: [/* ... */],
      highlightRow: 1, // 需要高亮的行索引
      highlightCol: 2 // 需要高亮的列索引
    }
  },
  methods: {
    cellStyle({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === this.highlightRow && columnIndex === this.highlightCol) {
        return 'background-color: yellow;'
      }
      return ''
    }
  }
}
</script>

2. 使用插槽（slot）：

<el-table :data="tableData">
  <el-table-column prop="date" label="日期"></el-table-column>
  <el-table-column prop="name" label="姓名"></el-table-column>
  <el-table-column prop="address" label="地址">
    <template slot-scope="scope">
      <div :style="scope.rowIndex === highlightRow && scope.columnIndex === highlightCol ? 'background-color: yellow;' : ''">
        {{ scope.row.address }}
      </div>
    </template>
  </el-table-column>
</el-table>

3. 使用自定义类：

<el-table :data="tableData" :cell-class-name="cellClassName">
  <el-table-column prop="date" label="日期"></el-table-column>
  <el-table-column prop="name" label="姓名"></el-table-column>
  <el-table-column prop="address" label="地址"></el-table-column>
</el-table>

<script>
export default {
  data() {
    return {
      tableData: [/* ... */],
      highlightRow: 1,
      highlightCol: 2
    }
  },
  methods: {
    cellClassName({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === this.highlightRow && columnIndex === this.highlightCol) {
        return 'highlight-cell'
      }
      return ''
    }
  }
}
</script>

<style>
.highlight-cell {
  background-color: yellow;
}
</style>

这些方法都可以实现el-table中某个单元格的高亮效果。选择哪种方法取决于你的具体需求和项目结构。