vue,element-ui表格,合并单元格

也是百度看的别人的代码,不过为了自己以后用起来方便,还是记录一下

vue,element-ui表格,合并单元格

vue,element-ui表格,合并单元格

 

 

   <el-table-column
            prop="modularName"
            show-overflow-tooltip
            label="模块"
            align="center"
     ></el-table-column>
//列表详情
    queryList(data) {
      this.list=[]
      this.loadingA = true;
      getList(data).then(res => {
        if (res.code == 0) {
          this.list = res.data;
          this.rowMergeArrs = this.rowMergeHandle(this.needMergeArr, this.list); // 处理数据
          this.loadingA = false;
        } else {
          this.loadingA = false;
        }
      });
    },
    //合并单元格
      arraySpanMethod({ row, column, rowIndex, columnIndex }) {
            // 没办法循环判断具体是那一列 所以就只好写了多个if
            if (column.property === ‘modularName‘) return this.mergeAction(‘modularName‘, rowIndex, column);
        },
       mergeAction(val, rowIndex, colData) {   // 参数 val 为 "name" 或者"id"
            let _row = this.rowMergeArrs[val].rowArr[rowIndex];
            let _col = _row > 0 ? 1 : 0;
            return [_row, _col];
        },
       rowMergeHandle(arr, data) { //arr: [‘name‘, ‘id‘]  data为tableData
            if (!Array.isArray(arr) && !arr.length) return false;
            if (!Array.isArray(data) && !data.length) return false;
            let needMerge = {};
            arr.forEach(i => {  // i 为 "name" 或者 "id"
                needMerge[i] = {
                    rowArr: [],
                    rowMergeNum: 0
                };
                data.forEach((item, index) => { // item: { id: ‘122‘, name: ‘王小虎‘, amount1: ‘539‘, amount2: ‘4.1‘, amount3: 15 }
                    /* item 为表格每一项的数据 ,index 为表格数据索引 */ 
                    // 表格首个数据单独处理
                    if (index === 0) {
                        needMerge[i].rowArr.push(1);
                        needMerge[i].rowMergeNum = 0;
                    } else {
                        // 如果后一项与前一项相等,只用改变 rowArr 数组,不用管 rowMergeNum 数值
                        if (item[i] === data[index - 1][i]) { // 后一项name与前一项name对比
                            needMerge[i].rowArr[needMerge[i].rowMergeNum] += 1; //此处是 rowMergeNum 属性存在的意义,就是为了定位要改变的数值
                            needMerge[i].rowArr.push(0);
                           // console.log("表格数据的转化步骤-"+ i +"的rowArr数组为:" +needMerge[i].rowArr,"   rowMergeNum的数值为:"+needMerge[i].rowMergeNum)
                        } 
                        //如果后一项与前一项不相等,rowArr、rowMergeNum都改变
                        else {
                            needMerge[i].rowArr.push(1);
                            needMerge[i].rowMergeNum = index;
                            // console.log("表格数据的转化步骤-"+ i +"的rowArr数组为:" +needMerge[i].rowArr,"   rowMergeNum的数值为:"+needMerge[i].rowMergeNum)
                        }
                    }
                });
            });
            return needMerge;
        },

注:modularName值要相对应;合并方法要在获取到表格的值以后调用

 

vue,element-ui表格,合并单元格

上一篇:UGUI六大基础组件——Graphic Raycaster


下一篇:ES5 深拷贝&浅拷贝