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 } }
  • 相关阅读:
    ftp上传下载
    java生成xml
    Java:删除某文件夹下的所有文件
    java读取某个文件夹下的所有文件
    JFileChooser 中文API
    得到java异常printStackTrace的详细信息
    关于SQL命令中不等号(!=,<>)
    ABP前端保存notify提示在Edge浏览器显示null
    关于MY Sql 查询锁表信息和解锁表
    VS2019 backspace键失效,无法使用
  • 原文地址:https://www.cnblogs.com/duanzhenzhen/p/14451100.html
Copyright © 2011-2022 走看看