antd table表格合并

Ant Design Vue 踩坑，版本不同，合并方法不同，此方法适用于 3.2版本

代码

<template>
    <div class="box">
        <a-table
          :columns="columns_zljc"
          :data-source="data_zljc"
          bordered
          :pagination="false"
        >
          <!-- :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" -->
          <template #bodyCell="{ column, text }">
            <template v-if="column.dataIndex === 'name'">
              {{ text }}
            </template>
          </template>
        </a-table>
    </div>
</template>
<script>
import { ref, reactive, getCurrentInstance, toRefs, onMounted } from 'vue'
export default {
  name: 'monitor',
  props: {},
  setup() {
    const { proxy, ctx } = getCurrentInstance()
    const data_zljc = [
      {
        key: '1',
        name: '中小客车',
        money: 32,
        tel: '0571-22098909',
        phone: 18889898989,
        address: 'New York No. 1 Lake Park'
      },
      {
        key: '2',
        name: '大客车',
        tel: '0571-22098333',
        phone: 18889898888,
        money: 42,
        address: 'London No. 1 Lake Park'
      },
      {
        key: '3',
        name: '小型货车',
        money: 32,
        tel: '0575-22098909',
        phone: 18900010002,
        address: 'Sidney No. 1 Lake Park'
      },
      {
        key: '4',
        name: '中型货车',
        money: 18,
        tel: '0575-22098909',
        phone: 18900010002,
        address: 'London No. 2 Lake Park'
      },
      {
        key: '5',
        name: '大型货车',
        money: 19,
        tel: '0575-22098909',
        phone: 18900010002,
        address: 'Dublin No. 2 Lake Park'
      }
    ]
    const sharedOnCell = (_, index) => {
      console.log(index);
      if (index === 4) {
        return { colSpan: 0 }
      }
    }
    let state = reactive({
      columns_zljc: [
        {
          title: '车型',
          dataIndex: 'name',
          align: 'center',
          colSpan: 1
        },
        {
          title: '完整率',
          className: 'column-money',
          dataIndex: 'money',
          align: 'center',
          customCell: (_, index) => ({
            colSpan: index < data_zljc.length - 1 ? 1 : 8
          })
        },
        {
          title: '异常率',
          dataIndex: 'address',
          align: 'center',
          customCell: sharedOnCell
        },
        {
          title: '及时率',
          dataIndex: 'address',
          align: 'center',
          customCell: sharedOnCell
        },
        {
          title: '接收总数',
          dataIndex: 'address',
          align: 'center',
          customCell: sharedOnCell
        },
        {
          title: '错误总数',
          dataIndex: 'address',
          align: 'center',
          customCell: sharedOnCell
        },
        {
          title: '及时总数',
          dataIndex: 'address',
          align: 'center',
          customCell: sharedOnCell
        },
        {
          title: '设备总数',
          dataIndex: 'address',
          align: 'center',
          customCell: sharedOnCell
        }
      ],
     
    })

    onMounted(() => {})
 
    const onSelectChange = selectedRowKeys => {
      console.log('selectedRowKeys changed: ', selectedRowKeys)
      state.selectedRowKeys = selectedRowKeys
    }
 

    const handleChange = value => {
      console.log(`selected ${value}`)
    }

    return {
      ...toRefs(state),
      handleChange,
      sharedOnCell,
      data_zljc
    }
  }
}
</script>
<style lang="less" scoped>
</style>

效果图