温馨提示×

温馨提示×

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

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

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

发布时间:2022-08-25 14:02:34 来源:亿速云 阅读:190 作者:iii 栏目:开发技术

这篇文章主要介绍“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单元格合并问题怎么解决”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注亿速云网站,小编会继续努力为大家带来更多实用的文章!

    向AI问一下细节

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

    AI