vxe-table中vxe-grid中的高亮行、高亮列实例

<vxe-grid v-bind="gridOptions" ref="tableRefs"></vxe-grid>


// 指定要高亮的列名
const highlightColumns = ref(['companyName', 'typeName']);

// 创建一个通用的 cellClassName 函数
const getCellClassName = ({ column }) => {
  if (highlightColumns.value.includes(column.field)) {
    return 'highlight-column';
  }
  return '';
};

const gridOptions = ref({
  data: [
    {
      companyName: '公司1',
      personName: '张三',
      typeName: '类型A',
      createDate: '2025-03-01',
      companyNameAgo: '公司X',
      proxyOrgName: '代垫公司Y'
    },
    {
      companyName: '公司2',
      personName: '李四',
      typeName: '类型B',
      createDate: '2025-03-02',
      companyNameAgo: '公司Z',
      proxyOrgName: '代垫公司W'
    }
  ],
  align: 'center',
  loading: false,
  border: true,
  // 行样式
  rowClassName({ row }) {
    if (row.companyName == '公司1') {
      return 'highlight-row';
    }
    return '';
  },
  // 单元格样式
  cellClassName: ({ row, column }) => {
    return getCellClassName({ column });
  },
  // 表头单元格样式
  headerCellClassName: ({ row, column }) => {
    return getCellClassName({ column });
  },
  columns: [
    { type: 'seq', width: 50 },
    {
      title: '人员名称',
      field: 'personName'
    },
    {
      title: '类型名称',
      field: 'typeName'
    },
    {
      title: '变更日期',
      field: 'createDate'
    },
    {
      title: '变更前公司',
      field: 'companyNameAgo'
    },
    {
      title: '当前任职公司',
      field: 'companyName'
    },
    {
      title: '代垫公司',
      field: 'proxyOrgName'
    }
  ]
});



//高亮样式
 :deep(.highlight-row) {
    background-color: #ffffcc; /* 或者任何你想要的颜色 */
  }
  :deep(.highlight-column) {
    background-color: #fff86b; /* 或者任何你想要的颜色 */
  }