elementui动态表格的合并单元格

需求

接口返回的数据,动态的合并相同数据的单元格。如图
在这里插入图片描述

原理

循环遍历接口请求的数据,记录相同数据重复的次数和位置,生成合并数据的数组,如下图:
根据下图生成要合并单元格的行rowspan和列colspan的数据,通过给table传入span-method方法可以实现合并行或列,其中方法的回调参数是一个对象,里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性
在这里插入图片描述

此图为渲染后,解析的图示,也就是通过修改行rowspan和列colspan的数据来实现合并

在这里插入图片描述

<template>
  <div style="padding: 20px;">
    <el-table :data="tableData" style="width: 100%;" :span-method="objectSpanMethod" border>
      <!--遍历表-->
      <!-- <el-table-column
          :prop="item.prop"
          :label="item.label"
          v-for="(item, index) in tableHeader"
          :key="index"
        ></el-table-column> -->
      <el-table-column label="班级" align="center" prop="className" />
      <el-table-column label="姓名" align="center" prop="name" />
      <el-table-column label="年龄" align="center" prop="age" />
    </el-table>
  </div>
</template>

<script>
  const datas = [{
      className: '高一三班',
      name: '张三',
      age: 18
    },
    {
      className: '高一三班',
      name: '张三',
      age: 19
    },
    {
      className: '高一三班',
      name: '王五',
      age: 18
    },
    {
      className: '高一七班',
      name: '赵六',
      age: 20
    },
    {
      className: '高一七班',
      name: '杜画',
      age: 20
    },
  ]
  export default {
    name: "MultiRowMergeTable",
    data() {
      this.spanMap = {};
      this.mergedColumns = ["className", "name", "age"]
      return {
        tableHeader: [{
            prop: "className",
            label: "班级",
          },
          {
            prop: "name",
            label: "姓名",
          },
          {
            prop: "age",
            label: "年龄",
          }
        ],
        tableData: [],
      }
    },
    created() {
      this.getList(); //进入页面时调用getList()获取tableData[]数据
    },
    methods: {
      //具体获取数据方法因需求而异
      getList() {
        // listExamineTableData(this.queryParams).then(response => {
        //   this.tableData = response.data;
        //   this.getSpanArr(this.tableData);
        // });
        this.tableData = datas;
        // console.log(this.tableData)
        this.getSpanArr(this.tableData);
      },
      getSpanArr(data) {
        for (var i = 0; i < data.length; i++) {
          if (i === 0) {
            this.mergedColumns.forEach(column => {
              this.spanMap[column] = {
                spanArr: [1],
                pos: 0,
                // index:i
              }
            })
          } else {
            this.mergedColumns.forEach(column => {
              if (data[i][column] === data[i - 1][column]) {
                this.spanMap[column].spanArr[this.spanMap[column].pos] += 1;
                this.spanMap[column].spanArr.push(0)
              } else {
                this.spanMap[column].spanArr.push(1);
                this.spanMap[column].pos = i;
              }
              // this.spanMap[column].index=i
            })
          }
          console.log(this.spanMap)
        }
      },
      objectSpanMethod({
        column,
        rowIndex
      }) {
        if (this.spanMap[column.property]) {
          const _row = this.spanMap[column.property].spanArr[rowIndex];
          const _col = _row > 0 ? 1 : 0;
          return {
            rowspan: _row,
            colspan: _col
          }
        }
      }
    }
  }
</script>
<style>
</style>

另外,在eladmin框架中,crud的刷新的钩子中,实现合并的单元格不好用,表现为loading未置false,于是做了一个监听,当"crud.data"立即调用getSpanArr()方法,重构合并的数据,继而实现合并的方法

watch:{
    "crud.data":{
        immediate: true, // 立即执行
        deep: true, // 深度监听复杂类型内变化
        handler(newVal, oldVal) {
           if(newVal){
             this.getSpanArr(this.crud.data)
           }
        }

    }
  },
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值