Element UI中table单元格合并的解决过程

2024-03-06 12:11:48

引言

项目中遇到表格单元格合并的需求，在此记录整个解决过程。

项目使用的是 Element UI，表格使用的是 table 组件。Element UI 的 table 表格组件中对单元格进行合并，需要使用 table 组件的 span-method 属性。

先看一张成果图（完整代码放在末尾）：

解决思路：

1、格式化后台返回的数据（根据实际数据格式处理）

项目后台返回的数据格式为树形结构，这里做简化展示：

[
  {
    'column1': '111',
    'column2': '222',
    'column3': '333',
    'children1': [
      {
        'column6': 666,
        'column4': '4440',
        'column5': '5550',
        'children2': [
          {
            'column7': '77701',
            'column8': '88801',
            'column9': '99901'
          }
        ]
      }
    ]
  }
]

需要先将树结构数据转为一维数组：

// table 表格数据初始化处理，将树结构数据转为一维数组
    handleData(data, parentId) {
      data.map((res, index) => {
        var obj = {
          id: parentId
        }
        for (const key in res) {
          const isarr = Object.values(res).find((age) => {
            return Array.isArray(age)
          })
          if (isarr) {
            if (Array.isArray(res[key])) {
              for (let i = 0; i < res[key].length; i++) {
                Object.assign(obj, res[key][i])
                data.push(obj)
                res[key].splice(i, 1)
                if (res[key].length === 0) {
                  data.splice(index, 1)
                }
                this.handleData(data, parentId)
              }
            } else {
              Object.assign(obj, { [key]: res[key] })
            }
          }
        }
      })
      return data
    }

因为后台返回的数据里没有唯一标识符，所以需要单独添加一个唯一标识表示转换为一维数组的数据是出自同一组树结构里。故此处在展开时单独加了一个 id 属性，用来代替唯一标识。如果后台返回的数据格式就是一个一维数组，可跳过数据格式化步骤。

2、在 data 中定义数据，需要合并几列就定义几个数组和索引

  data() {
    return {
      tableData: [],
      // 合并单元格
      column1Arr: [], // column1
      column1Index: 0, // column1索引
      column2Arr: [], // column2
      column2Index: 0, // column2索引
      column3Arr: [], // column3
      column3Index: 0, // column3索引
      column4Arr: [], // column4
      column4Index: 0, // column4
      column5Arr: [], // column5
      column5Index: 0, // column5索引
      column6Arr: [], // column6
      column6Index: 0 // column6索引
    }
  }

3、定义合并函数

以第一行为基准，一层层对比，参数 data 就是格式化以后的表格数据，以每个数据里的唯一标识 id 作为合并的参照字段：

    // 初始化合并行数组
    mergeInit() {
      this.column1Arr = [] // column1
      this.column1Index = 0 // column1索引
      this.column2Arr = [] // column2
      this.column2Index = 0 // column2索引
      this.column3Arr = [] // column3
      this.column3Index = 0 // column3索引
      this.column4Arr = [] // column4
      this.column4Index = 0 // column4索引
      this.column5Arr = [] // column5
      this.column5Index = 0 // column5索引
      this.column6Arr = [] // column6
      this.column6Index = 0 // column6索引
    },
    // 合并表格
    mergeTable(data) {
      this.mergeInit()
      if (data.length > 0) {
        for (var i = 0; i < data.length; i++) {
          if (i === 0) {
            // 第一行必须存在，以第一行为基准
            this.column1Arr.push(1) // column1
            this.column1Index = 0

            this.column2Arr.push(1) // column2
            this.column2Index = 0

            this.column3Arr.push(1) // column3
            this.column3Index = 0

            this.column4Arr.push(1) // column4
            this.column4Index = 0

            this.column5Arr.push(1) // column5
            this.column5Index = 0

            this.column6Arr.push(1) // column6
            this.column6Index = 0
          } else {
            // 判断当前元素与上一元素是否相同
            // column1
            if (
              data[i].column1 === data[i - 1].column1 &&
              data[i].id === data[i - 1].id
            ) {
              this.column1Arr[this.column1Index] += 1
              this.column1Arr.push(0)
            } else {
              this.column1Arr.push(1)
              this.column1Index = i
            }

            // column2
            if (
              data[i].column2 === data[i - 1].column2 &&
              data[i].id === data[i - 1].id
            ) {
              this.column2Arr[this.column2Index] += 1
              this.column2Arr.push(0)
            } else {
              this.column2Arr.push(1)
              this.column2Index = i
            }

            // column3
            if (
              data[i].column3 === data[i - 1].column3 &&
              data[i].id === data[i - 1].id
            ) {
              this.column3Arr[this.column3Index] += 1
              this.column3Arr.push(0)
            } else {
              this.column3Arr.push(1)
              this.column3Index = i
            }

            // column4
            if (
              data[i].column4 === data[i - 1].column4 &&
              data[i].id === data[i - 1].id
            ) {
              this.column4Arr[this.column4Index] += 1
              this.column4Arr.push(0)
            } else {
              this.column4Arr.push(1)
              this.column4Index = i
            }

            // column5
            if (
              data[i].column5 === data[i - 1].column5 &&
              data[i].column4 === data[i - 1].column4 &&
              data[i].id === data[i - 1].id
            ) {
              this.column5Arr[this.column5Index] += 1
              this.column5Arr.push(0)
            } else {
              this.column5Arr.push(1)
              this.column5Index = i
            }

            // column6
            if (
              data[i].column6 === data[i - 1].column6 &&
              data[i].column4 === data[i - 1].column4 &&
              data[i].id === data[i - 1].id
            ) {
              this.column6Arr[this.column6Index] += 1
              this.column6Arr.push(0)
            } else {
              this.column6Arr.push(1)
              this.column6Index = i
            }
          }
        }
      }
    },

注意，同一组数据里可能会有多个 children1 或者 children2，这时合并的时候会有多个条件进行判断：

4、table 组件属性 span-method 的单元格合并方法：

    handleSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0 || columnIndex === 1) {
        // 第一列 column1
        const _row_1 = this.column1Arr[rowIndex]
        const _col_1 = _row_1 > 0 ? 1 : 0
        return {
          rowspan: _row_1,
          colspan: _col_1
        }
      } else if (columnIndex === 2) {
        // 第二列 column2
        const _row_2 = this.column2Arr[rowIndex]
        const _col_2 = _row_2 > 0 ? 1 : 0
        return {
          rowspan: _row_2,
          colspan: _col_2
        }
      } else if (columnIndex === 3) {
        // 第三列 column3
        const _row_2 = this.column3Arr[rowIndex]
        const _col_2 = _row_2 > 0 ? 1 : 0
        return {
          rowspan: _row_2,
          colspan: _col_2
        }
      } else if (columnIndex === 4) {
        // 第四列 column4
        const _row_2 = this.column4Arr[rowIndex]
        const _col_2 = _row_2 > 0 ? 1 : 0
        return {
          rowspan: _row_2,
          colspan: _col_2
        }
      } else if (columnIndex === 5) {
        // 第五列 column5
        const _row_2 = this.column5Arr[rowIndex]
        const _col_2 = _row_2 > 0 ? 1 : 0
        return {
          rowspan: _row_2,
          colspan: _col_2
        }
      } else if (columnIndex === 6) {
        // 第六列 column6
        const _row_2 = this.column6Arr[rowIndex]
        const _col_2 = _row_2 > 0 ? 1 : 0
        return {
          rowspan: _row_2,
          colspan: _col_2
        }
      }
    }

至此，整个单元格合并就完成了！

如果觉得写得还不错，还请点赞支持，感谢感谢感谢！！！

完整代码：

<template>
  <div class="table-wrap">
    <el-table
      :data="tableData"
      :span-method="handleSpanMethod"
      :cell-style="{ background: '#FFFFFF' }"
      border
      style="width: 100%"
    >
      <el-table-column prop="id" label="序号" align="center" width="80">
        <template slot-scope="scope">
          {{ scope.row.id + 1 }}
        </template>
      </el-table-column>
      <el-table-column prop="column1" label="column1" align="center" />
      <el-table-column prop="column2" label="column2" align="center" />
      <el-table-column prop="column3" label="column3" align="center" />
      <el-table-column prop="column4" label="column4" align="center" />
      <el-table-column prop="column5" label="column5" align="center" />
      <el-table-column prop="column6" label="column6" align="center" />
      <el-table-column prop="column7" label="column7" align="center" />
      <el-table-column prop="column8" label="column8" align="center" />
      <el-table-column prop="column9" label="column9" align="center" />
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'CellMerge',
  data() {
    return {
      tableData: [],
      // 合并单元格
      column1Arr: [], // column1
      column1Index: 0, // column1索引
      column2Arr: [], // column2
      column2Index: 0, // column2索引
      column3Arr: [], // column3
      column3Index: 0, // column3索引
      column4Arr: [], // column4
      column4Index: 0, // column4
      column5Arr: [], // column5
      column5Index: 0, // column5索引
      column6Arr: [], // column6
      column6Index: 0 // column6索引
    }
  },
  mounted() {
    this.initTableData()
  },
  methods: {
    // 初始化表格数据
    initTableData() {
      const newTableData = [
        {
          'column1': '111',
          'column2': '222',
          'column3': '333',
          'children1': [
            {
              'column6': 666,
              'column4': '4440',
              'column5': '5550',
              'children2': [
                {
                  'column7': '77701',
                  'column8': '88801',
                  'column9': '99901'
                },
                {
                  'column7': '77702',
                  'column8': '88802',
                  'column9': '99902'
                },
                {
                  'column7': '77703',
                  'column8': '88803',
                  'column9': '99903'
                }
              ]
            },
            {
              'column6': 666,
              'column4': '4441',
              'column5': '5551',
              'children2': [
                {
                  'column7': '77711',
                  'column8': '88811',
                  'column9': '99911'
                }
              ]
            },
            {
              'column6': 666,
              'column4': '4442',
              'column5': '5552',
              'children2': [
                {
                  'column7': '77721',
                  'column8': '88821',
                  'column9': '99921'
                },
                {
                  'column7': '77722',
                  'column8': '88822',
                  'column9': '99922'
                }
              ]
            }
          ]
        },
        {
          'column1': '111',
          'column2': '222',
          'column3': '333',
          'children1': [
            {
              'column6': 666,
              'column4': '4440',
              'column5': '5550',
              'children2': [
                {
                  'column7': '77701',
                  'column8': '88801',
                  'column9': '99901'
                }
              ]
            },
            {
              'column6': 666,
              'column4': '4441',
              'column5': '5551',
              'children2': [
                {
                  'column7': '77711',
                  'column8': '88811',
                  'column9': '99911'
                },
                {
                  'column7': '77712',
                  'column8': '88812',
                  'column9': '99912'
                }
              ]
            }
          ]
        },
        {
          'column1': '111',
          'column2': '222',
          'column3': '333',
          'children1': [
            {
              'column6': 666,
              'column4': '4440',
              'column5': '5550',
              'children2': [
                {
                  'column7': '77701',
                  'column8': '88801',
                  'column9': '99901'
                },
                {
                  'column7': '77702',
                  'column8': '88802',
                  'column9': '99902'
                },
                {
                  'column7': '77703',
                  'column8': '88803',
                  'column9': '99903'
                }
              ]
            },
            {
              'column6': 666,
              'column4': '4441',
              'column5': '5551',
              'children2': [
                {
                  'column7': '77711',
                  'column8': '88811',
                  'column9': '99911'
                }
              ]
            }
          ]
        }
      ]
      this.tableData = []
      newTableData.map((res, index) => {
        const parentId = index
        this.tableData.push.apply(
          this.tableData,
          this.handleData([res], parentId)
        )
      })
      this.mergeTable(this.tableData)
    },
    // table 表格数据初始化处理，将树结构数据转为一维数组
    handleData(data, parentId) {
      data.map((res, index) => {
        var obj = {
          id: parentId
        }
        for (const key in res) {
          const isarr = Object.values(res).find((age) => {
            return Array.isArray(age)
          })
          if (isarr) {
            if (Array.isArray(res[key])) {
              for (let i = 0; i < res[key].length; i++) {
                Object.assign(obj, res[key][i])
                data.push(obj)
                res[key].splice(i, 1)
                if (res[key].length === 0) {
                  data.splice(index, 1)
                }
                this.handleData(data, parentId)
              }
            } else {
              Object.assign(obj, { [key]: res[key] })
            }
          }
        }
      })
      return data
    },
    // 初始化合并行数组
    mergeInit() {
      this.column1Arr = [] // column1
      this.column1Index = 0 // column1索引
      this.column2Arr = [] // column2
      this.column2Index = 0 // column2索引
      this.column3Arr = [] // column3
      this.column3Index = 0 // column3索引
      this.column4Arr = [] // column4
      this.column4Index = 0 // column4索引
      this.column5Arr = [] // column5
      this.column5Index = 0 // column5索引
      this.column6Arr = [] // column6
      this.column6Index = 0 // column6索引
    },
    // 合并表格
    mergeTable(data) {
      this.mergeInit()
      if (data.length > 0) {
        for (var i = 0; i < data.length; i++) {
          if (i === 0) {
            // 第一行必须存在，以第一行为基准
            this.column1Arr.push(1) // column1
            this.column1Index = 0

            this.column2Arr.push(1) // column2
            this.column2Index = 0

            this.column3Arr.push(1) // column3
            this.column3Index = 0

            this.column4Arr.push(1) // column4
            this.column4Index = 0

            this.column5Arr.push(1) // column5
            this.column5Index = 0

            this.column6Arr.push(1) // column6
            this.column6Index = 0
          } else {
            // 判断当前元素与上一元素是否相同
            // column1
            if (
              data[i].column1 === data[i - 1].column1 &&
              data[i].id === data[i - 1].id
            ) {
              this.column1Arr[this.column1Index] += 1
              this.column1Arr.push(0)
            } else {
              this.column1Arr.push(1)
              this.column1Index = i
            }

            // column2
            if (
              data[i].column2 === data[i - 1].column2 &&
              data[i].id === data[i - 1].id
            ) {
              this.column2Arr[this.column2Index] += 1
              this.column2Arr.push(0)
            } else {
              this.column2Arr.push(1)
              this.column2Index = i
            }

            // column3
            if (
              data[i].column3 === data[i - 1].column3 &&
              data[i].id === data[i - 1].id
            ) {
              this.column3Arr[this.column3Index] += 1
              this.column3Arr.push(0)
            } else {
              this.column3Arr.push(1)
              this.column3Index = i
            }

            // column4
            if (
              data[i].column4 === data[i - 1].column4 &&
              data[i].id === data[i - 1].id
            ) {
              this.column4Arr[this.column4Index] += 1
              this.column4Arr.push(0)
            } else {
              this.column4Arr.push(1)
              this.column4Index = i
            }

            // column5
            if (
              data[i].column5 === data[i - 1].column5 &&
              data[i].column4 === data[i - 1].column4 &&
              data[i].id === data[i - 1].id
            ) {
              this.column5Arr[this.column5Index] += 1
              this.column5Arr.push(0)
            } else {
              this.column5Arr.push(1)
              this.column5Index = i
            }

            // column6
            if (
              data[i].column6 === data[i - 1].column6 &&
              data[i].column4 === data[i - 1].column4 &&
              data[i].id === data[i - 1].id
            ) {
              this.column6Arr[this.column6Index] += 1
              this.column6Arr.push(0)
            } else {
              this.column6Arr.push(1)
              this.column6Index = i
            }
          }
        }
      }
    },
    handleSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0 || columnIndex === 1) {
        // 第一列 column1
        const _row_1 = this.column1Arr[rowIndex]
        const _col_1 = _row_1 > 0 ? 1 : 0
        return {
          rowspan: _row_1,
          colspan: _col_1
        }
      } else if (columnIndex === 2) {
        // 第二列 column2
        const _row_2 = this.column2Arr[rowIndex]
        const _col_2 = _row_2 > 0 ? 1 : 0
        return {
          rowspan: _row_2,
          colspan: _col_2
        }
      } else if (columnIndex === 3) {
        // 第三列 column3
        const _row_2 = this.column3Arr[rowIndex]
        const _col_2 = _row_2 > 0 ? 1 : 0
        return {
          rowspan: _row_2,
          colspan: _col_2
        }
      } else if (columnIndex === 4) {
        // 第四列 column4
        const _row_2 = this.column4Arr[rowIndex]
        const _col_2 = _row_2 > 0 ? 1 : 0
        return {
          rowspan: _row_2,
          colspan: _col_2
        }
      } else if (columnIndex === 5) {
        // 第五列 column5
        const _row_2 = this.column5Arr[rowIndex]
        const _col_2 = _row_2 > 0 ? 1 : 0
        return {
          rowspan: _row_2,
          colspan: _col_2
        }
      } else if (columnIndex === 6) {
        // 第六列 column6
        const _row_2 = this.column6Arr[rowIndex]
        const _col_2 = _row_2 > 0 ? 1 : 0
        return {
          rowspan: _row_2,
          colspan: _col_2
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
  .table-wrap {
    width: 100%;
    height: 100%;
    padding: 20px;
  }
</style>

总结

到此这篇关于Element UI中table单元格合并的文章就介绍到这了,更多相关Element UI table单元格合并内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

vue element-ui table组件动态生成表头和数据并修改单元格格式父子组件通信

父组件定义表头和表内容 data(){ return{ // 表格数据 tableColumns: [], // 表头数据 titleData:[], } } 引入并注册子组件 import TableComponents from "../../components/table/table"; //注册子组件table components: { tableC: TableComponents }, 获取表头和表内容数据.(真实数据应该是从接口获取的,由于是测试数据这里我先写死)
vue+elementui实现点击table中的单元格触发事件--弹框

elementui中提供了点击行处理事件查看位置: elementui的table事件 elementui的table中怎样点击某个单元格触发事件? 可以先看一下官网中table的自定义列模板代码 <template> <el-table :data="tableData" border style="width: 100%"> <el-table-column label="日期" width="180
VUE+elementui组件在table-cell单元格中绘制微型echarts图

需求效果图示例实际完成效果图 ** 代码实现注:table表格为二次封装的子组件 -在table表格中根据 scope.$index动态设置元素的id ,便于指定单元格的echarts初始化: -在单元格中触发一个方法,传入当前的scope.row数据或者指定其他数据,并且传入 scope.$index 以及一个字符串便于识别当前是哪条数据的charts -在方法中绘制echarts** <el-table-column align="center"> <tem
Element UI中table单元格合并的解决过程

目录引言解决思路: 1.格式化后台返回的数据(根据实际数据格式处理) 2.在 data 中定义数据,需要合并几列就定义几个数组和索引 3.定义合并函数 4.table 组件属性 span-method 的单元格合并方法: 完整代码: 总结引言项目中遇到表格单元格合并的需求,在此记录整个解决过程. 项目使用的是 Element UI,表格使用的是 table 组件.Element UI 的 table 表格组件中对单元格进行合并,需要使用 table 组件的 span-method 属性.
JQuery实现表格中相同单元格合并示例代码

代码: 复制代码代码如下: <!DOCTYPE html> <html> <head> <title>merge.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this
element-ui中Table表格省市区合并单元格的方法实现

本文介绍了element-ui中Table表格省市区合并单元格的方法实现,分享给大家,具体如下: 效果如图代码如下: <template> <div> <el-form :inline="true" :model="formInline" class="demo-form-inline"> <el-form-item label="搜索"> <el-input v-mod
使用jQuery 操作table 完成单元格合并的实例

比较表格的内容.判断是否合并单元格: tr = $("#printPage tr").length;// 获取当前表格中tr的个数 var mark = 0; //要合并的单元格数 var index = 0; //起始行数 /* * 要合并单元格,需要存储两个参数, * 1,开始合并的单元格的第一行的行数, * 2.要合并的单元格的个数 **/ console.log(tr); //判断若只有一行数据,则不做调整 if(tr <= 2){ }else{ //var i=1 比
C#实现拆分合并Word表格中的单元格

目录程序环境在Word表格中合并单元格完整代码效果图在Word表格中拆分单元格完整代码效果图我们在使用Word制作表格时,由于表格较为复杂,只是简单的插入行.列并不能满足我们的需要.要做一个完整的表格,很多时候需要将单元格进行拆分或者合并,才能达到我们想要的效果.那么具体要如何操作呢?别担心,本文将详细为您介绍在Word表格中拆分或合并单元格的思路及方法. 在Word表格中合并单元格在Word表格中拆分单元格程序环境本次测试时,在程序中引入Free Spire.Doc fo
ExtJS 4.2 Grid组件单元格合并的方法

ExtJS 4.2 Grid组件本身并没有提供单元格合并功能,需要自己实现这个功能. 目录 1. 原理 2. 多列合并 3. 代码与在线演示 1. 原理 1.1 HTML代码分析首先创建一个Grid组件,然后查看下的HTML源码. 1.1.1 Grid组件 1.1.2 HTML代码从这些代码中可以看出,Grid组件可分为grid-header和grid-body 两块区域(若含有工具栏和分页栏,它们都会含有各自的独立区域). 其中grid-body包含了许多tr元素,每一个tr都是代表Gri
jQuery实现鼠标双击Table单元格变成文本框及输入内容后更新到数据库的方法

本文实例讲述了jQuery实现鼠标双击Table单元格变成文本框及输入内容后更新到数据库的方法.分享给大家供大家参考,具体如下: JS鼠标双击事件 onDblClick <td width="10%" title="双击修改" ondblclick="ShowElement(this,<%#Eval("id") %> </td> 这里的本人用绑定的值是传的当前行对应的ID号 function ShowEle
bootstrap table实现x-editable的行单元格编辑及解决数据Empty和支持多样式问题

前言最近在研究bootstrap table的表格的单元格编辑功能,实现点击单元格修改内容,其中包括文本(text)方式修改,下拉选择(select)方式修改,日期(date)格式修改等. 本文着重解决x-editable编辑的数据动态添加和显示数据为Empty的问题,还有给表格单元格的内容设置多样式,使得显示多样化. 由于官网给的demo的数据都是html文件里写好的,select类型的不能动态添加(所以网上的大多都是官网的类似例子,本篇博客就是在这种情况下以自己的经验分享给大家,有问题可以
bootstrap table单元格新增行并编辑

table单元格新增行并编辑,具体内容如下需要 bootstrap.min.css -- [ Bootstrap ] jquery-1.8.2.min.js -- [ Jquery ] 代码 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>新建HTML</title> <