arco-table的单元格合并不好用？我来教你如何处理

效果展示：

具体实现：

<template>
    <div class="container">
        <div class="title flexRowCenterAll">
            <h2>凭证</h2>
        </div>
        <br>
        <br>
        <div class="flexRowCenterAll" style="justify-content: space-between;">
            <div class="flexRowCenterAll">
                <a-select v-model="listQuery.type" placeholder="请选择" style="width: 10rem;" allow-clear>
                    <a-option :value="1">总账</a-option>
                    <a-option :value="2">发票</a-option>
                    <a-option :value="3">资金</a-option>
                    <a-option :value="4">费用</a-option>
                    <a-option :value="5">薪酬</a-option>
                    <a-option :value="6">结转</a-option>
                </a-select>
                <a-input v-model="listQuery.template_name" style="margin: 0 1rem;" placeholder="请输入" allow-clear></a-input>
                <a-button type="primary" @click="getlist">
                    <template #icon>
                        <icon-search />
                    </template>
                    <span>
                        搜索
                    </span>
                </a-button>
            </div>
            <a-button type="primary">
                <template #icon>
                    <icon-plus />
                </template>
                <span>
                    新增
                </span>
            </a-button>
        </div>
        <br>
        <br>
        <a-table :data="list" :bordered="{wrapper: true, cell: true}">
            <template #columns>
                <a-table-column title="模板名称" data-index="template_name" align="center" />
                <a-table-column title="摘要" data-index="abstract" align="center" />
                <a-table-column title="方向" align="center">
                    <template #cell="{ record }">
                        <div class="diytd" v-for="(item,index) in record.subclass" :key="index">
                            {{ item.status == 1 ? '借' : '贷' }}
                        </div>
                    </template>
                </a-table-column>
                <a-table-column title="科目名称" align="center">
                    <template #cell="{ record }">
                        <div class="diytd" v-for="(item,index) in record.subclass" :key="index">
                            {{ item.ledger_all_name }}
                        </div>
                    </template>
                </a-table-column>
                <a-table-column title="取值" align="center">
                    <template #cell="{ record }">
                        <div class="diytd" v-for="(item,index) in record.subclass" :key="index">
                            <span v-if="record.type != 1">
                                {{  item.status == 1 ? item.borrower : item.iender }}
                            </span>
                            <span v-else>
                                &nbsp;
                            </span>
                        </div>
                    </template>
                </a-table-column>
                <a-table-column title="操作" align="center">
                    <template #cell="{ record }">
                        <div class="flexRowCenterAll" style="width: 100%;height: 100%;">
                            <img src="@/assets/xiuuser.png" alt="" srcset="">
                            <img src="@/assets/shanuser.png" alt="" srcset="" style="margin-left: 1rem;">
                        </div>
                    </template>
                </a-table-column>
            </template>
        </a-table>
    </div>
</template>

<script lang="ts" setup>
    import { ref,onMounted } from 'vue';
    import { voucherlist } from '@/api/companySetting';

    const listQuery = ref<any>({})
    const list = ref<any>([])
    const getlist = async () => {
        const res = await voucherlist(listQuery.value);
        list.value = res.result
    }

    onMounted(() => {
        getlist();
    })
</script>
<style lang="less" scoped>
    .container{
        :deep(.arco-table-cell):has(.diytd){
            padding: 0;
            .diytd{
                padding: 0.6rem 1.06667rem;
                border-bottom: 1px solid #ddd;
                &:last-child{ border: none; }
            }
        }
    }
</style>