zoukankan      html  css  js  c++  java
  • ant design vue中table动态合并列

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

    <!-- 表格 -->
      <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: "实体工程",
                       '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: "项目",
                     '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;
    }
    

      

      

  • 相关阅读:
    零是奇数还是偶数?
    解决TortoiseSVN中out of date问题的一个方法
    squid透明代理+iptables防火墙,多网卡详细配置
    基于协同过滤的推荐方法
    IP分片和TCP分片 MTU和MSS(转)
    Google Protocol Buffer 的使用和原理(转)
    到底多少线程算是线程数太多?
    开源软件53个相关概念
    GPL,LGPL和BSD等协议注意事项
    IEEE 802
  • 原文地址:https://www.cnblogs.com/theblogs/p/14856603.html
Copyright © 2011-2022 走看看