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 } }
  • 相关阅读:
    如何检查项目的需求是否完整
    Linux环境 Java内存快速查看
    字符串拼接性能比较出乎意料的结果
    MySQL 查看表大小
    五大机器学习微信公众号推荐
    如何用PYTHON代码写出音乐
    【转载】机器学习如门概览
    机器学习PAI为你自动写歌词,妈妈再也不用担心我的freestyle了(提供数据、代码)
    【转载】程序猿转型AI必须知道的几件事!
    如何拿到阿里算法校招offer
  • 原文地址:https://www.cnblogs.com/duanzhenzhen/p/14451100.html
Copyright © 2011-2022 走看看