• 使用element 表格进行动态合并单元格


    步骤分三步:

    1、获取数据

    2、拿到list之后使用方法去遍历条件相同的值 (判断条件自定义) 

    3、合并行,可多行添加

    _____

    定义

    spanArr: [ ]

    position: 0

    _____

    :这里是拿到数据遍历相同的值

     rowspan() {
         this.tableData.forEach((item, index) => {
           if (index === 0) {
             this.spanArr.push(1);
             this.position = 0;
           } else {
          //这里是判断的条件
    if ((this.tableData[index].name === this.tableData[index - 1].name) && (this.tableData[index].channel === this.tableData[index - 1].channel)) { this.spanArr[this.position] += 1; this.spanArr.push(0); } else { this.spanArr.push(1); this.position = index; } } });   }

    :合并行,可多行添加

    //这里使用element 官方方法
    spanMethod({ rowIndex, columnIndex }) {
            //表格合并行
            if (columnIndex === 1) {
              const _row = this.spanArr[rowIndex];
              const _col = _row > 0 ? 1 : 0;
              return {
                rowspan: _row,
                colspan: _col
              };
            }
            if (columnIndex === 2) {
              const _row = this.spanArr[rowIndex];
              const _col = _row > 0 ? 1 : 0;
              return {
                rowspan: _row,
                colspan: _col
              };
            }
            if (columnIndex === 3) {
              const _row = this.spanArr[rowIndex];
              const _col = _row > 0 ? 1 : 0;
              return {
                rowspan: _row,
                colspan: _col
              };
            }
            if (columnIndex === 14) {
              const _row = this.spanArr[rowIndex];
              const _col = _row > 0 ? 1 : 0;
              return {
                rowspan: _row,
                colspan: _col
              };
            }
          }
  • 相关阅读:
    安装python官方的mysql库“mysql-connector-python”
    ubuntu(Mint-17)修改dns
    Updating Protobuf and GRPC in Golang
    git切换到远程分支
    ubuntu下取代ping的好工具tcpping
    为什么利率上升,债券价格下降?
    关于债券之我的疑惑
    GitHub超详细图文攻略
    git——从远程库克隆
    git——添加远程库
  • 原文地址:https://www.cnblogs.com/king94Boy/p/14101617.html
Copyright © 2020-2023  润新知