vxe-table 给单元格加样式的方式详解，支持 style 和 className 的方式给单元格加样式

vxe-table 给单元格加样式的方式详解，支持 style 和 className 的方式给单元格加样式

https://vxetable.cn

className 方式

行的样色、单元格样式，表头的样式、表尾的样式、全部都可以完全自定义，通过设置 cell-class-name、header-cell-class-name、row-class-name ...等参数，当自定义样式之后可能会覆盖表格的样式，比如选中行..等，记得自行处理好相关样式

通过给 td 加上 class，方便深层样式改动，适合通过 class 切换样式

<template>
  <div>
    <vxe-grid class="mygrid-style1" v-bind="gridOptions"></vxe-grid>
  </div>
</template>

<script setup>
import { reactive } from 'vue'

const gridOptions = reactive({
  border: true,
  headerCellClassName ({ column }) {
    if (column.field === 'name') {
      return 'col-blue'
    }
    return null
  },
  rowClassName ({ rowIndex }) {
    if ([2, 3, 5].includes(rowIndex)) {
      return 'row-green'
    }
    return null
  },
  cellClassName ({ row, column }) {
    if (column.field === 'sex') {
      if (row.sex >= '1') {
        return 'col-red'
      } else if (row.age === 26) {
        return 'col-orange'
      }
    }
    return null
  },
  columns: [
    { type: 'seq', width: 70 },
    { field: 'name', title: 'Name' },
    { field: 'sex', title: 'Sex' },
    {
      field: 'age',
      title: 'Age',
      headerClassName () {
        return 'col-orange'
      }
    },
    { field: 'attr1', title: 'Attr1' },
    { field: 'address', title: 'Address', showOverflow: true }
  ],
  data: [
    { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' },
    { id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
    { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
    { id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 23, address: 'test abc' },
    { id: 10005, name: 'Test5', role: 'Develop', sex: 'Women', age: 30, address: 'Shanghai' },
    { id: 10006, name: 'Test6', role: 'Designer', sex: 'Women', age: 21, address: 'test abc' },
    { id: 10007, name: 'Test7', role: 'Test', sex: 'Man', age: 29, address: 'test abc' },
    { id: 10008, name: 'Test8', role: 'Develop', sex: 'Man', age: 35, address: 'test abc' }
  ]
})

</script>

<style lang="scss">
.mygrid-style1.vxe-grid .vxe-body--row.row-green {
  background-color: #187;
  color: #fff;
}
.mygrid-style1.vxe-grid .vxe-header--column.col-blue {
  background-color: #2db7f5;
  color: #fff;
}
.mygrid-style1.vxe-grid .vxe-header--column.col-orange {
  background-color: orange;
  color: #fff;
}
.mygrid-style1.vxe-grid .vxe-body--column.col-red {
  background-color: red;
  color: #fff;
}
</style>

style 方式

行的动态样色、单元格动态样式，表头的动态样式、表尾的动态样式、可以通过设置 cell-style、header-cell-style、row-style ...等参数，当自定义样式之后可能会覆盖表格的样式，比如选中行..等，记得自行处理好相关样式

通过 style 给 td 加上对应的样式，适合变量动态切换样式

<template>
  <div>
    <vxe-grid v-bind="gridOptions"></vxe-grid>
  </div>
</template>

<script setup>
import { reactive } from 'vue'

const gridOptions = reactive({
  border: true,
  headerCellStyle ({ column }) {
    if (column.field === 'name') {
      return {
        backgroundColor: '#f60',
        color: '#ffffff'
      }
    }
  },
  rowStyle ({ rowIndex }) {
    if ([2, 3, 5].includes(rowIndex)) {
      return {
        backgroundColor: 'red',
        color: '#ffffff'
      }
    }
  },
  cellStyle ({ row, column }) {
    if (column.field === 'sex') {
      if (row.sex >= '1') {
        return {
          backgroundColor: '#187'
        }
      } else if (row.age === 26) {
        return {
          backgroundColor: '#2db7f5'
        }
      }
    }
  },
  columns: [
    { type: 'seq', width: 70 },
    { field: 'name', title: 'Name' },
    { field: 'sex', title: 'Sex' },
    { field: 'age', title: 'Age' },
    { field: 'address', title: 'Address', showOverflow: true }
  ],
  data: [
    { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' },
    { id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
    { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
    { id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' }
  ]
})
</script>

https://gitee.com/x-extends/vxe-table