table单元格合并，行高修改

Ant Design Vue table组件单元格合并、行高修改

---

一、Ant Design Vue table组件单元格合并、行高修改

直接上代码

<template>
  <a-modal :visible="props.visible" width="100%" title="详情" @cancel="closeModal" @ok="closeModal" centered>

    <a-table :columns="columns" :data-source="tableData" :bordered="true" :pagination="false" :scroll="{ y: scrollY }"></a-table>
  </a-modal>
</template>

<script lang="ts" name="spotTotalDown" setup>
import type { TableColumnsType } from 'ant-design-vue';
import {onBeforeMount, ref, watch} from 'vue';
import { list } from "./projectContact.api";
const emit = defineEmits(['closeModal'])
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
})


const columns: TableColumnsType = [

  {
    title: '序号',
    customRender: ({ index }: { index: number }) => {
      return `${index + 1}`
    },
    width: 100
  },

  {
    title:'业务部门',
    width:200,
    dataIndex: 'BUSINESS_DEPARTMENT',
    //单元格合并
    customCell: (record, index) => {
      let arr = tableData.value.filter((res) => {
        //这里BUSINESS_DEPARTMENT 是我需要判断的字段名（相同就合并）
        return res.BUSINESS_DEPARTMENT == record.BUSINESS_DEPARTMENT;
      });
      if (index == 0 || tableData.value[index - 1].BUSINESS_DEPARTMENT != record.BUSINESS_DEPARTMENT) {
        return { rowSpan: arr.length };
      } else {
        return { rowSpan: 0 };
      }
    }
  },
  {
    title:'系统名称',
    width:250,
    dataIndex: 'XT_NAME'
  },
  {
    title:'业务DRI',
    width:250,
    dataIndex: 'YW_DRI'
  },
  {
    title:'开发DRI',
    width:300,
    dataIndex: 'KF_DRI'
  },
  // {
  //   title:'开发邮箱',
  //   width:300,
  //   dataIndex: 'KF_EMAIL'
  // },
  {
    title:'紧急联系人',
    // width:400,
    dataIndex: 'EMERGENCY_CONTACT'
  },
];

const tableData = ref([])
const closeModal = () => {
  emit('closeModal')
}
const scrollY = ref<boolean | number>(false)

const spotTotalview = async () => {
  const res = await list();
  tableData.value = res.result
};


onBeforeMount(()=>{
  spotTotalview()
  if (window.innerWidth < 1400) {
    scrollY.value = 460
  } else {
    scrollY.value = false
  }

  window.addEventListener('resize', () => {
    if (window.innerWidth < 1400) {
      scrollY.value = 460
    } else {
      scrollY.value = false
    }
  })
})


</script>

<style scoped>
:deep(.ant-table-thead > tr > th) {
  border-right: 1px solid #000000 !important;
  border-bottom: 1px solid #000000 !important;
  border-top: 1px solid #000000 !important;
  padding: 8px 0 !important;
  //b表头加粗
  font-weight: bolder !important;
}


:deep(.ant-table-tbody > tr > td) {
  border-bottom: 1px solid #000000 !important;
  border-right: 1px solid #000000 !important;
  //行高
  padding: 0 !important;
}

</style>

二、效果

---

总结

记录、备忘