ant design vue 中 table column自定义样式问题

直接上图，需要实现的效果

实现代码

<template>
  <div class="_table_">
    <a-table
      bordered
      :row-class-name="(_record, index) => (index % 2 === 1 ? 'report-table-striped' : null)"
      :columns="_columns"
      :data-source="tableData"
      :pagination="false"
    />
  </div>
</template>
<script lang="ts" setup>
import type { ColumnsType } from 'ant-design-vue/es/table/interface';
import { computed, ref } from 'vue';
type IProps = {
  columns: ColumnsType;
  tableData: any[];
};

const props = withDefaults(defineProps<IProps>(), {});

const _columns = computed(() => {
  return props.columns.map((c) => ({ ...c, ellipsis: c.ellipsis === false ? false : true }));
});
</script>

<style lang="less" scoped>
._table_ {
  width: 920px;
  background: #f4f4f4;
  @border-color: #c4d3f2;
  :deep(.analysis_judgment-table-cell) {
    border-color: @border-color !important;
  }
  :deep(.analysis_judgment-table-thead) {
    tr {
      box-sizing: border-box;
      th {
        background: rgba(45, 115, 251, 0.16);
        padding: 12px 24px;
        width: 56px;
        font-family:
          PingFang SC,
          PingFang SC;
        font-weight: 600;
        font-size: 14px;
        color: #2c2c2c;
        &::before {
          display: none;
        }
      }
    }
    :deep(.analysis_judgment-table-cell) {
      padding: 12px 24px;
    }
  }
}

.table-striped {
  background: rgba(45, 115, 251, 0.08);
}
</style>


/****************** 全局css *****************/
.report-table-striped {
  background: rgba(45, 115, 251, 0.08);
}
.report-table-row {
  background: rgba(45, 115, 251, 0.08) !important;
}
/******************* 全局css end****************/

使用组件

<template>
  <div class="report-wrapper">
    <Table :columns="table1.columns" :tableData="table1.tableData" />
  </div>
</template>
<script setup lang="ts">
import { useTab1 } from './useTab1';
import Table from './table/index.vue';
/************************ hooks ******************************/
const { table1, exportObj, currentChain } = useTab1();
/************************ hooks end******************************/
</script>

useTab1.ts

// @ts-ignore
import { useStoreRefs } from '@/store/modules/user';
import { message } from 'ant-design-vue';
import { computed, onMounted, reactive } from 'vue';
import type { ColumnsType } from 'ant-design-vue/es/table/interface';

type IChain = {
  label: string;
  code: string;
  value: string;
};

type ITable = {
  columns: ColumnsType;
  tableData: any[];
};

export const useTab1 = () => {
  const { chain } = useStoreRefs();
  const table1 = reactive<ITable>({
    columns: [
      {
        title: '所属环节',
        dataIndex: 'node',
        width: '154px',
        customCell: (_, index) => {
          if (index === 0) {
            return {
              rowSpan: table1.tableData.length,
              class: 'report-table-row',
            };
          } else {
            return {
              rowSpan: 0,
            };
          }
        },
      },
      {
        title: 'U1',
        dataIndex: 'U1',
        key: 'U1',
        width: '255px',
      },
      {
        title: 'U2',
        dataIndex: 'U2',
        key: 'U2',
        width: '255px',
      },
      {
        title: 'U3',
        dataIndex: 'U3',
        key: 'U3',
        width: '255px',
      },
    ],
    tableData: Array(10)
      .fill({})
      .map((i, index) => {
        return {
          id: index,
          node: '优质企业名称',
          U1: '企业名称企业名称企业名称U1',
          U2: '企业名称企业名称企业名称U2',
          U3: '企业名称企业名称企业名称U3',
        };
      }),
  });
  const currentChain = computed<IChain>(() => {
    return {
      label: chain.value.label,
      value: chain.value.value,
      code: chain.value.value,
    };
  });
  const exportObj = reactive({
    handleExport: () => {
      exportObj.loading = true;
      setTimeout(() => {
        exportObj.loading = false;
        message.success('导出成功');
      }, 1000);
    },
    loading: false,
  });
  const getList = () => {};

  onMounted(() => {
    getList();
  });

  return { table1, currentChain, exportObj, getList };
};

上图

ok! 实现