ElementUI中table单元格合并问题怎么解决

发布时间:2022-08-25 14:02:34 作者:iii
来源:亿速云 阅读:212

这篇文章主要介绍“ElementUI中table单元格合并问题怎么解决”,在日常操作中,相信很多人在ElementUI中table单元格合并问题怎么解决问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”ElementUI中table单元格合并问题怎么解决”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

引言

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

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

ElementUI中table单元格合并问题怎么解决

先看一张成果图(完整代码放在末尾):

ElementUI中table单元格合并问题怎么解决

解决思路:

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,这时合并的时候会有多个条件进行判断:

ElementUI中table单元格合并问题怎么解决

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-
      border
      
    >
      <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>

到此,关于“ElementUI中table单元格合并问题怎么解决”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注亿速云网站,小编会继续努力为大家带来更多实用的文章!

推荐阅读:
  1. css实现table表格单元格合并的方法
  2. 如何解决vue elementUI中table里数字、字母、中文混合排序问题

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

elementui table

上一篇:Spring框架之IOC的特点是什么

下一篇:K8s主机重启后kubelet无法自动启动怎么解决

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》