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

      

      

  • 相关阅读:
    终端I/O之行控制函数
    终端I/O之波特率函数
    终端I/O之stty命令
    终端I/O之终端选项标志
    终端I/O之获得和设置终端属性
    终端I/O之特殊输入字符
    终端I/O之综述
    css大小单位px em rem的转换和详解
    简单jquery实现select三级联动
    html 页面内锚点定位及跳转方法总结
  • 原文地址:https://www.cnblogs.com/theblogs/p/14856603.html
Copyright © 2011-2022 走看看