el-table合并单元格

最新推荐文章于 2024-10-11 09:54:38 发布

Emotion_c

最新推荐文章于 2024-10-11 09:54:38 发布

阅读量349

点赞数

文章标签： elementui vue.js 前端

本文链接：https://blog.csdn.net/emotion_c/article/details/125372301

版权

该篇博客详细介绍了如何在Vue.js应用中实现表格数据的动态合并。通过监听数据变化，利用`mounted`和`methods`中的`getSpanArr`方法处理数据，确保在分页时也能正确合并单元格。主要涉及到`objectSpanMethod`方法用于合并单元格的逻辑，以及`getList`方法获取并更新表格数据。

摘要由CSDN通过智能技术生成

<el-table
v-if="tableData.length>0"
id="myTable"
:data="tableData"
style="width: 100%;"
:span-method="objectSpanMethod"

>

mounted() {
    this.getList()
    this.getSpanArr(this.tableData)
  },
method： {
// 获取列表
getList() {
      let query = {
        ...this.formKey,
        page:this.paginationConfig.currentPage,
        rows:this.paginationConfig.currentSize,
      }
      这里是列表接口(query).then(res => {
        this.tableData = res.list
        this.paginationConfig.total = res.total
        this.getSpanArr(this.tableData)
      })
    },
// 合并单元格
objectSpanMethod({ rowIndex, columnIndex }){
    if(columnIndex === 1){ // 要合并的是第二列 
        if(this.spanArr[rowIndex]){
            return {
                rowspan:this.spanArr[rowIndex],
                colspan:1
            }
    }else{
            return {
                rowspan: 0,
                colspan: 0
            }
        }
    }
},
merageInit() { // 对数据进行初始化  不然分页的时候会出错
      this.spanArr = [];
      this.position = 0;
    },
getSpanArr(data) {
      this.merageInit()
      data.forEach((item, index) => {
        if (index === 0) {
          this.spanArr.push(1)
          this.position = 0
        } else if (data[index].enterpriseLevel === data[index - 1].enterpriseLevel) { // 合并当前列的属性
          this.spanArr[this.position] += 1
          this.spanArr.push(0)
        } else {
          this.spanArr.push(1)
          this.position = index
        }
      })
    },
}