zoukankan      html  css  js  c++  java
  • ant design of vue 表格合并

    ui框架官网:https://www.antdv.com/components/table-cn/

    弄了差不多一天,哎,终于可以了;

    需求:以下表格中红框部分的数据虽然一样,但因为“等级”不同,不能做合并;

    方案:

    data部分:

    temp:{},//当前重复的值,支持多列
    filBonusColumns:[
              {
                title: '等级',
                dataIndex: 'dengji',
                align: 'center',
                customRender: (value, row, index) => {
                  const obj = {
                    children: value,
                    attrs: {},
                  };
                  obj.attrs.rowSpan = this.mergeCellKey(value, this.filBonusInfo, 'dengji','filBonusInfo');
    
                  return obj;
                },
              },
              {
                title: '分红比例',
                dataIndex: 'bonusBili',
                align: 'center',
                customRender: (value, row, index) => {
                  const obj = {
                    children: value,
                    attrs: {},
                  };
                  obj.attrs.rowSpan = this.mergeCellKey(row.dengji, this.integralBonusInfo, '','filBonusInfo','dengji');
                  return obj;
                },
              },
    //................... ]

     methods部分:

    /*
        * 单元格合并
        * text 当前单元格内容
        * array 表格所有数据
        * columns 当前单元格对应的属性名
        * arrayName 为了区别 同一个页面的不同表单中有同一个属性值
        * relateColumns 若合并的单元格是根据另一列的合并情况做的合并,使用此参数
        * */
          mergeCellKey(text, array, columns, arrayName, relateColumns){
            let that = this;
            let i = 0;
    // 若有依赖的单元格
    if(relateColumns){
    // 'relate'用来区分“当前列”和“依赖列”
    if (text !== that.temp[arrayName + 'relate' + relateColumns]) { that.temp[arrayName + 'relate' + relateColumns] = text for(let index=0;index<array.length;index++){
    // 依赖列的当前单元格数据 === 已经存储的值,则i+1
    if(array[index][relateColumns] === that.temp[arrayName + 'relate' + relateColumns]){ i += 1; } } } }else{ if (text !== that.temp[arrayName + columns]) { that.temp[arrayName + columns] = text for(let index=0;index<array.length;index++){ if(array[index][columns] === that.temp[arrayName + columns]){ i += 1; } } } } return i } }
  • 相关阅读:
    [http://www.chromium.org/]Chromium项目Home
    [DevExpress]ASP.NET控件ASPxComboBox组合框小结(二)
    [C#多线程编程(三)]多线程使用
    拼音输入法你应该更高级点儿
    [实体框架编程] 第三章 查询实体数据模型(一)
    [C#多线程编程(一)] 导读
    [C#多线程编程(五)]并行编程
    [C#多线程编程(四)]高级线程编程
    LINQ之查询语法select子句
    log4net系列目录
  • 原文地址:https://www.cnblogs.com/duanzhenzhen/p/14451100.html
Copyright © 2011-2022 走看看