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


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

// 創(chuàng)建一個通用的 cellClassName 函數(shù)
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(wǎng)'
    }
  ],
  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; /* 或者任何你想要的顏色 */
  }