Element Plus修改表格行和单元格样式详解

<template>
  <el-table :data="tableData" border style="width: 400px">
    <el-table-column prop="name" label="姓名" width="100" />
    <el-table-column prop="age" label="年龄" width="100" />
    <el-table-column prop="job" label="工作" />
  </el-table>
</template>

<script setup>
const tableData = [
  {
    name: "clz",
    age: 21,
    job: "Coder",
  },
  {
    name: "czh",
    age: 21,
    job: "Coder",
  },
  {
    name: "赤蓝紫",
    age: 21,
    job: "Coder",
  },
];
</script>

<style lang="less" scoped>
</style>

<el-table 
  style="width: 400px" 
  border 
  :data="tableData" 
  :row-style="rowState"
>
</el-table>

const rowState = (arg) => {
  console.log(arg)
}

const rowState = (arg) => {
  return {
    backgroundColor: 'pink',
    color: '#fff'
  }
}

const rowState = ({ row }) => {
  let style = {}

  switch (row.name) {
    case 'clz':
      style = {
        backgroundColor: 'red'
      }
      break;
    case 'czh':
      style = {
        backgroundColor: 'blue'
      }
      break;
    case '赤蓝紫':
      style = {
        backgroundColor: 'purple'
      }
      break;
  }
  return style;
}

<el-table 
  style="width: 400px" 
  border 
  :data="tableData" 
  :cell-style="cellStyle"
>
</el-table>

const cellStyle = ({ row, column, rowIndex, columnIndex }) => {
  if (rowIndex === 1 && columnIndex === 1) {
    return {
      backgroundColor: 'pink'
    }
  }
}

const cellStyle = ({ row, column, rowIndex, columnIndex }) => {
  if (column.label === '工作') {
    return {
      backgroundColor: 'purple'
    }
  }

  if (row.name === '赤蓝紫') {
    return {
      backgroundColor: 'red'
    }
  }

}

const headerRowStyle = (args) => {
  console.log(args)
  return {
    height: '100px',
    backgroundColor: 'red'
  }
}

const headerCellStyle = ({ row, column, rowIndex, columnIndex }) => {
  if (columnIndex === 1) {
    return {
      backgroundColor: 'pink'
    }
  }
}

const headerCellStyle = ({ row, column, rowIndex, columnIndex }) => {
​
  if (column.label === '姓名') {
    return {
      backgroundColor: 'red'
    }
  }
}