根据表格中的数据，动态合并单元格

Vue表格合并单元格：span-method实现数据动态合并

最新推荐文章于 2024-10-14 03:57:09 发布

原创最新推荐文章于 2024-10-14 03:57:09 发布 · 360 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#elementui #javascript #vue.js

本文介绍如何在Vue中使用el-table组件实现表格的合并单元格功能，通过spanMethod方法根据自定义规则动态调整行高和列宽，配合初始化数据和span-method函数实例详解。

1.我们最终要实现这样一个效果

2.在表格上声明span-method方法，并注册相关的函数

<template>
  <el-table
    :data="tableData"
    style="width: 100%"
    border
    :span-method="spanMethod"
    >
    <el-table-column
      prop="date"
      label="日期"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      sortable
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址">
    </el-table-column>
  </el-table>
</template>

3. 表格中的初始化数据如下

 tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-02',
          name: '韩立',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '韩立',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }],

4.完整代码如下

<template>
  <el-table
    :data="tableData"
    style="width: 100%"
    border
    :span-method="spanMethod"
    >
    <el-table-column
      prop="date"
      label="日期"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      sortable
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址">
    </el-table-column>
  </el-table>
</template>

<script>

const propArr = ['date','name','address']
export default {
data() {
  return {
     tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-02',
          name: '韩立',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '韩立',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }],

        mergeRule:[]   //定义合并单元格规则的数组
  }
},

mounted() { 
    this.defineMergeRule() 
    console.log(this.mergeRule)
  /* 
   [ [2,0,1,1],[1,2,0,1], [1,1,2,0] ]   
    生成的是这样的一个二维数组结构
    */
},

methods:{
  defineMergeRule() { //用于（生成合并规则数组）的函数
    let position = 0  //定义一个用来记录某一列中的,规则记录到哪一列的变量
    
    this.mergeRule = propArr.map((prop)=>{
      //prop参数代表的是表格中的属性值
      const arr = [1]
      this.tableData.forEach((item,index)=>{
       if(index!==0) {
         if(this.tableData[index][prop]===this.tableData[index-1][prop]){
          arr[position] +=1
          arr.push(0)
        }else {
          arr.push(1)
          position = index
        }
       }
      })

      return arr
    })

  },

  spanMethod({rowIndex,columnIndex}) { //
    return {
      //表格中的数据如果初始是为[],需要做一下兼容
      // rowspan:this.mergeRule[columnIndex][rowIndex],  
      rowspan:this.mergeRule[columnIndex]?this.mergeRule[columnIndex][rowIndex]:1,   
      colspan:1
    }
  }
}
}
</script>

<style>

</style>