antd-vue table跨行合并单元格

最新推荐文章于 2024-10-14 03:57:09 发布

麻辣_水煮鱼

最新推荐文章于 2024-10-14 03:57:09 发布

阅读量2.2k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： antd-vue table antd表格跨行合并单元格

本文链接：https://blog.youkuaiyun.com/weixin_42217154/article/details/111354722

本文介绍如何在Ant Design Vue的table组件中实现跨行合并单元格，通过示例代码展示具体操作步骤和效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图：

直接贴代码

<a-table
    :columns="columns" :data-source="statisticData" bordered size="small"
    :pagination=false :scroll="scrollY"
    :rowKey="(record,index)=>{return index}">

const columns = [
  {
    title: '资产',
    colSpan: 3,
    align:'center',
    customRender: ( text,record, index ) => {
      const obj = {
        children: '',
        attrs: {},
        style:{}
      };
      if (index === 0) {
        obj.children = '国土空间资源';
        obj.attrs.rowSpan = 14;
        obj.style.fontSize = '20px';
        obj.style.fontWeight = '800';
      }
      else if (index === 14) {
        obj.children = '物质资源';
        obj.attrs.rowSpan = 25;
        obj.style.fontSize = '20px';
        obj.style.fontWeight = '800';
      }
      e