ant design vue中table动态合并列

• Z时代
• 2024-01-10
• 分类：综合

需求：查看详情中的表格模板，第一列需要合并。

<!-- 表格 -->
  <a-table
     :columns="columns2"
     :data-source="form1.prePlanProjectAppends"
     bordered
     rowKey=""
     style="margin-top: 20px"
    :scroll="{ y: 500 }"
    :pagination="false">
  </a-table>

data() {
     return {
         columnsgcsljbxx: [
               {
                  title: "实体工程",
                  width: '150px',
                  dataIndex: "columnOne",
                  align: 'center',
                  sorter: (a, b) => {
                    return a.columnOne.localeCompare(b.columnOne);
                  },
                  customRender:(text, row, index)=>{
                   return {
                      children: <span>{text}</span>,
                      attrs: {
                         rowSpan: row.spans[0],//需要合并的数据
                       }
                    }
                  }
              },
             {
                title: "项目",
                width: '250px',
                dataIndex: "columnTwo",
                align: 'center'
            },
            {
                title: "量",
                dataIndex: "columnThree",
                align: 'center',
                scopedSlots: { customRender: "columnThree" },
            }
          ]
     }
}

methods: {
     //合并第一列
     handleTableColumnSpanMethod(projectQuantities) {
         const uniqueKey = [];
         //遍历源数据，columnOne是第一列的名字，找到第一列从当前开始合并
         projectQuantities.forEach(item => {
            if (uniqueKey.some(keyItem => keyItem === item.columnOne)) {
               item.spans = [0,1]
               return
            }
            const projectQuantitiesFilterList =  projectQuantities.filter(projectItem => item.columnOne === projectItem.columnOne)
            const projectLength = projectQuantitiesFilterList.length
              item.spans = [projectLength,1]
              uniqueKey.push(item.columnOne)
            })
            return projectQuantities
         }
}

　　回显的表格调用合并列方法

init(mode, data) {
     this.form1.prePlanProjectAppends = this.handleTableColumnSpanMethod(data.prePlanProjectAppends);
     this.visible = true;
}

以上是 ant design vue中table动态合并列 的全部内容， 来源链接： utcz.com/z/378224.html