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;
    }
    

      

      

  • 相关阅读:
    第14周周总结
    第13周周总结
    栈与队列
    前端继承方式汇总
    实现前端资源增量式更新的一种思路
    link和@import引入外部样式的区别
    webSocket
    Java 下载JDK账号
    穿透
    vue.set方法的使用
  • 原文地址:https://www.cnblogs.com/theblogs/p/14856603.html
Copyright © 2011-2022 走看看