• element-ui 合并相邻的相同行 span-method


    vue

    <div id="app">
    <template>
      <div>
    
        <el-table :data="tableData6" :span-method="objectSpanMethod" border style=" 100%; margin-top: 20px">
          <el-table-column prop="id" label="ID" width="180">
          </el-table-column>
          <el-table-column prop="name" label="姓名">
          </el-table-column>
          <el-table-column prop="amount1" label="数值 1(元)">
          </el-table-column>
          <el-table-column prop="amount2" label="数值 2(元)">
          </el-table-column>
          <el-table-column prop="amount3" label="数值 3(元)">
          </el-table-column>
        </el-table>
      </div>
    </template>
    </div>

    javascript

    function getRowIndex(objArr, index) {
        return objArr[index]._rs === 0 ? getRowIndex(objArr, index - 1) : index;
    }
    
    const spanMethod = function(name) {
      // name 需要做相邻合并的属性名称
        var a = []; // 做一个二维数组
        
      return function objectSpanMethod({ row, column, rowIndex, columnIndex }) {
        console.log({ row, column, rowIndex, columnIndex, a })
    
        // 合并第nameClunmnIndex列
        if (column.property === name) {
            let aI = a[columnIndex] && a[columnIndex][rowIndex];
          console.log(1)
    
          if (!aI) {
              // 未判断过的进行相关处理
            if(!a[columnIndex]) {
              a[columnIndex] = [];
            }
            console.log(2)
    
            aI = {
                _rs: 1,
              _cs: 1,
              [name]: row[name],
            };
            console.log(3)
    
            a[columnIndex][rowIndex] = aI;
            console.log(4)
    
            if (rowIndex && a[columnIndex][rowIndex - 1][name] === row[name]) {
                // 如果不是第一个参数 且上一个参数和这一个参数相同
              console.log(5)
    
              // 隐藏这个参数
              aI._rs = 0;
              aI._cs = 0;
              
              a[columnIndex][
                  getRowIndex(a[columnIndex], rowIndex - 1)
              ]._rs += 1;
            }
    
          }
    
          return [aI._rs, aI._cs]
          }
        };
    }
    
    var Main = {
        data() {
          return {
            tableData6: [{
              id: '12987122',
              name: '王小虎',
              amount1: '234',
              amount2: '3.2',
              amount3: 10
            }, {
              id: '12987123',
              name: '王小虎',
              amount1: '165',
              amount2: '4.43',
              amount3: 12
            }, {
              id: '12987125',
              name: '王小虎',
              amount1: '324',
              amount2: '1.9',
              amount3: 9
            }, {
              id: '12987125',
              name: '王小虎',
              amount1: '621',
              amount2: '2.2',
              amount3: 17
            }, {
              id: '12987128',
              name: '王小虎',
              amount1: '539',
              amount2: '4.1',
              amount3: 15
            }]
          };
        },
        methods: {
          objectSpanMethod: spanMethod('id'),
        }
      };
    var Ctor = Vue.extend(Main)
    new Ctor().$mount('#app')
  • 相关阅读:
    CloudStack+KVM环境搭建(步骤很详细,说明ClockStack是用来管理虚拟机的)
    CloudStack和OpenStack该如何选择(如果准备选择OpenStack,请做好hack的准备。CloudStack的底层功能已经做的很完善了,更适合商用)
    NancyFx And ReactiveX
    Apache Kafka® is a distributed streaming platform
    C/C++配置
    Win10 专业版 Hyper-V 主机计算服务无法启动
    使用事件和 CQRS 重写 CRUD 系统
    使用Skywalking分布式链路追踪系统
    GraphQL&DSL&API网关
    TomatoLog 是一个基于 .NETCore 平台的产品。
  • 原文地址:https://www.cnblogs.com/qiang-ling/p/11389637.html
Copyright © 2020-2023  润新知