vue + antd项目中关于Table的那些事儿之合并单元格

Vue+Antd Table动态合并单元格实战

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

原创

最新推荐文章于 2024-10-14 03:57:09 发布 · 1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue #typescript

本文是前端新手对于Vue+Vue CLI+Ant Design+TypeScript项目中使用Table组件实现动态合并相同类目单元格的分享，适合初学者。通过编写UI和功能性代码，展示如何根据数据自动合并单元格，同时提到了可扩展的功能如查询和操作选择项。

引言：笔者为前端小白，本文章是笔者项目中代码分享，仅供初学者参考。

背景：vue+vue-cli+antd+ts，利用antd组件库的table组件根据添加的数据，如果是相同的类目，则自动合并单元格；

正文：

1、编写UI代码（待渲染的表格）：

<a-table
      :columns="columns"
      :pagination="false"
      :data-source="selectedList"
      row-key="value"
      bordered
/>

2、功能性代码：

class ProjectItem {
  productId: number
  productTpye: string
  value: number
  label: string
}

export default class mergeCells extends Vue {
selectedList: Array<ProjectItem> = []

/**
   * table columns
   */
  get columns(): any[] {

    const columns = [
      {
        title: '所属产品类型',
        dataIndex: 'productTpye',
        width: 200,
        customRender(_, row): object {
          return {
            children: row.productTpye,
            attrs: {
              rowSpan: row.productTpyeRowSpan,
            },
          }
        },
      },
      {
        title: '已选产品',
        dataIndex: 'label',