美文网首页vue
elementUI el-table合并单元格-行合并(简单数组

elementUI el-table合并单元格-行合并(简单数组

作者: 後弦月的雨 | 来源:发表于2020-07-20 16:29 被阅读0次

    合并单元格,如果id列值一致,则合并

    原理

    1、getSpanArr(data)方法 data就是我们从后台拿到的数据,通常是一个数组;
    2、spanArr是一个空的数组,用于存放每一行记录的合并数;
    3、 pos是spanArr的索引。
    如果是第一条记录(索引为0),向数组中加入1,并设置索引位置;
    如果不是第一条记录,则判断它与前一条记录是否相等,
    如果相等,则向spanArr中添入元素0,并将前一位元素+1,表示合并行数+1,
    以此往复,得到所有行的合并数,0即表示该行不显示

    <template>
      <div style="padding:20px">
        <el-table :data="tableData6" :span-method="objectSpanMethod" border >
          <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>
      </div>
    </template>
    <script>
    export default {
      data() {
        return {
          spanArr: [],//用于存放每一行记录的合并数
          tableData6: [
            {
              id: "1",
              name: "王小虎",
              amount1: "234"
            },
            {
              id: "1",
              name: "王小虎",
              amount1: "165"
            },
            {
              id: "2",
              name: "王小虎",
              amount1: "324"
            },
            {
              id: "2",
              name: "王小虎",
              amount1: "621"
            },
            {
              id: "2",
              name: "王小虎",
              amount1: "539"
            }
          ]
        };
      },
      mounted: function() {
        this.getSpanArr(this.tableData6);
      },
      methods: {
        getSpanArr(data) {
            // data就是我们从后台拿到的数据
          for (var i = 0; i < data.length; i++) {
            if (i === 0) {
              this.spanArr.push(1);
              this.pos = 0;
            } else {
              // 判断当前元素与上一个元素是否相同
              if (data[i].id === data[i - 1].id) {
                this.spanArr[this.pos] += 1;
                this.spanArr.push(0);
              } else {
                this.spanArr.push(1);
                this.pos = i;
              }
            }
            console.log(this.spanArr);
          }
        },
        objectSpanMethod({ row, column, rowIndex, columnIndex }) {
          if (columnIndex === 0 || columnIndex === 1) {
            const _row = this.spanArr[rowIndex];
            const _col = _row > 0 ? 1 : 0;
            console.log(`rowspan:${_row} colspan:${_col}`);
            return {
              // [0,0] 表示这一行不显示, [2,1]表示行的合并数
              rowspan: _row,
              colspan: _col
            };
          }
        }
      }
    };
    </script>
    

    最终显示效果

    image.png

    备注:
    本示例参考自他人https://www.cnblogs.com/mmzuo-798/p/11686021.html

    相关文章

      网友评论

        本文标题:elementUI el-table合并单元格-行合并(简单数组

        本文链接:https://www.haomeiwen.com/subject/iodykktx.html