ant-table表合并行和合并列

最新推荐文章于 2024-10-12 17:37:25 发布

土豆逆袭la

最新推荐文章于 2024-10-12 17:37:25 发布

阅读量810

点赞数

分类专栏：项目随笔 ant design vue 文章标签： vue.js

本文链接：https://blog.csdn.net/kassiaaaa/article/details/113604318

版权

本文介绍如何在使用Vue.js的ant-design组件库中实现表格的行和列合并。通过修改html中table的数据源，设置js中的columns属性，并定义特定的customRender方法来处理合并逻辑。

摘要由CSDN通过智能技术生成

以下是合并行，合并列时把所有的rowSpan 换成colSpan
1.html—table引入(:dataSource=“makeData(dataSource.data)”)

<a-table :scroll="{y: dataSource.rowsHeight,x:1800}" :customRow="customHover" bordered
               :columns="columns" :dataSource="makeData(dataSource.data)"
               :pagination="false" :locale="{emptyText: '暂无数据'}">

2.js定义变量columns（谁要合并就要定义customRender）

 const columns = [
    {
      title: "故障类别",
      dataIndex: "issueType",
      width: 200,
      scopedSlots: { customRender: "issueType" },
      customRender: (value, row) => {
        const obj = {
          children: row.issueType,
          attrs: {},
        };
        obj.attrs.rowSpan = row.rowSpan;
        return obj;
      },
    },
    ...
    ]

3.methods定义方法，处理数据