vxe-table 给单元格添加自定义颜色状态，单元格加自定义样式

vxe-table 给单元格添加自定义颜色状态，单元格加自定义样式

查看官网：https://vxetable.cn
gitbub：https://github.com/x-extends/vxe-table
gitee：https://gitee.com/x-extends/vxe-table

第一种， class 方式

通过 headerCellClassName 、rowClassName 、cellClassName 等参数自定义渲染单元格 class，返回值就是 class 字符串

<template>
  <div>
    <vxe-grid class="mygrid-style" 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' },
    { 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" scoped>
::v-deep(.mygrid-style.vxe-grid .vxe-body--row.row-green) {
  background-color: #187;
  color: #fff;
}
::v-deep(.mygrid-style.vxe-grid .vxe-header--column.col-blue) {
  background-color: #2db7f5;
  color: #fff;
}
::v-deep(.mygrid-style.vxe-grid .vxe-body--column.col-red) {
  background-color: red;
  color: #fff;
}
</style>

第二种， style 方式

通过 headerCellStyle 、rowStyle 、cellStyle 等参数自定义渲染单元格样式，返回值是个 style 对象

<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