el-table实现表格合并与v-for多层循环嵌套失效解决办法

已于 2023-11-21 14:14:45 修改
阅读量1.1k 收藏 5
点赞数 4
分类专栏： vue 文章标签： vue.js elementui javascript 前端
于 2023-11-20 11:12:30 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_57634698/article/details/134502815
版权

在写项目过程中，有一个el-table表格固定列合并，且与v-for结合循环多层数组的需求。主要是解决循环数组中每项item里的list，实现合并表格。

1. 下图为整体实现效果

2. 下面为v-for循环的数据结构，以及el-table的展示，绑定el-table的表格合并的方法为：:span-method

<div v-for="(item, index) in tableDataAll" :key="index">
      <!-- 表格部分 -->
          <el-table
            :data="item.aeromatBoxLocationList"
            :span-method="
              ({ row, column, rowIndex, columnIndex }) =>
                objectSpanMethod(
                  row,
                  column,
                  rowIndex,
                  columnIndex,
                  item.aeromatBoxLocationList
                )
            "
            border
            style="width: 100%"
          >
            <el-table-column
              prop="squareCode"
              label="栅格序号"
              min-width="90"
              align="center"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <span>
                  {{ scope.row.squareCode ? scope.row.squareCode : "暂无" }}
                </span>
              </template>
            </el-table-column>
            <el-table-column
              prop="subBoxFloorage"
              label="栅格底面积"
              min-width="90"
              align="center"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <span>
                  {{
                    scope.row.subBoxFloorage ? scope.row.subBoxFloorage : "暂无"
                  }}
                </span>
              </template>
            </el-table-column>
            <el-table-column
              prop="subBoxHeight"
              label="栅格高"
              min-width="90"
              align="center"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <span>
                  {{ scope.row.subBoxHeight ? scope.row.subBoxHeight : "暂无" }}
                </span>
              </template>
            </el-table-column>
            <el-table-column
              prop="ceSeq"
              label="册序号"
              align="center"
              min-width="90"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <span>
                  {{ scope.row.ceSeq ? scope.row.ceSeq : "暂无" }}
                </span>
              </template>
            </el-table-column>
            <el-table-column
              prop="model"
              label="型号"
              align="center"
              min-width="90"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <span>
                  {{ scope.row.model ? scope.row.model : "暂无" }}
                </span>
              </template>
            </el-table-column>
            <el-table-column
              prop="importance"
              label="重要度"
              align="center"
              min-width="90"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <span>
                  {{ scope.row.importance ? scope.row.importance : "暂无" }}
                </span>
              </template>
            </el-table-column>
            <el-table-column
              prop="weight"
              label="重量(kg)"
              align="center"
              min-width="90"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <span>
                  {{ scope.row.weight ? scope.row.weight : "暂无" }}
                </span>
              </template>
            </el-table-column>
            <el-table-column
              prop="volume"
              label="体积(cm³)"
              align="center"
              min-width="90"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <span>
                  {{ scope.row.volume ? scope.row.volume : "暂无" }}
                </span>
              </template>
            </el-table-column>
            <el-table-column
              prop="floorage"
              label="底面积(cm²)"
              align="center"
              min-width="90"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <span>
                  {{ scope.row.floorage ? scope.row.floorage : "暂无" }}
                </span>
              </template>
            </el-table-column>
            <el-table-column
              prop="maxSide"
              label="最长边(cm)"
              align="center"
              min-width="90"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <span>
                  {{ scope.row.maxSide ? scope.row.maxSide : "暂无" }}
                </span>
              </template>
            </el-table-column>
          </el-table>
    </div>

3. el-table整体绑定的tableDataAll数据格式

    tableDataAll: [
        {
            "uuid": "1",
            "schemeId": 2,
            "aeromatBoxLocationList": [
                {
                    "uuid": "1",
                    "squareCode": 1,
                    "subBoxFloorage": 224440.0,
                    "subBoxHeight": 492.0,
                    "ceSeq": "1030000107",
                    "name": "1111",
                    "model": "TS3-2281",
                    "importance": "3",
                    "weight": 67.0,
                    "volume": 2800.0,
                    "floorage": 400.0,
                    "maxSide": 20.0
                },
                {
                    "uuid": "1",
                    "squareCode": 1,
                    "subBoxFloorage": 224440.0,
                    "subBoxHeight": 492.0,
                    "ceSeq": "1030000050",
                    "name": "2222",
                    "model": "TS3-228",
                    "importance": "3",
                    "weight": 2.0,
                    "volume": 4200.0,
                    "floorage": 600.0,
                    "maxSide": 30.0
                },
                {
                    "uuid": "1",
                    "squareCode": 2,
                    "subBoxFloorage": 448880.0,
                    "subBoxHeight": 492.0,
                    "ceSeq": "1030000103",
                    "name": "3333",
                    "model": "KFS-281",
                    "importance": "1",
                    "weight": 5.0,
                    "volume": 1000.0,
                    "floorage": 1000.0,
                    "maxSide": 50.0
                },
                {
                    "uuid": "1",
                    "squareCode": 2,
                    "subBoxFloorage": 448880.0,
                    "subBoxHeight": 492.0,
                    "ceSeq": "1030000103",
                    "name": "4444",
                    "model": "KFS-281",
                    "importance": "1",
                    "weight": 5.0,
                    "volume": 1000.0,
                    "floorage": 1000.0,
                    "maxSide": 50.0
                },
                {
                    "uuid": "1",
                    "squareCode": 2,
                    "subBoxFloorage": 448880.0,
                    "subBoxHeight": 492.0,
                    "ceSeq": "1030000103",
                    "name": "5555",
                    "model": "KFS-281",
                    "importance": "1",
                    "weight": 5.0,
                    "volume": 1000.0,
                    "floorage": 1000.0,
                    "maxSide": 50.0
                },
                {
                    "uuid": "1",
                    "squareCode": 2,
                    "subBoxFloorage": 448880.0,
                    "subBoxHeight": 492.0,
                    "ceSeq": "1030000050",
                    "name": "6666",
                    "model": "TS3-228",
                    "importance": "3",
                    "weight": 2.0,
                    "volume": 4200.0,
                    "floorage": 600.0,
                    "maxSide": 30.0
                },
                {
                    "uuid": "1",
                    "squareCode": 2,
                    "subBoxFloorage": 448880.0,
                    "subBoxHeight": 492.0,
                    "ceSeq": "1030000050",
                    "name": "7777",
                    "model": "TS3-228",
                    "importance": "3",
                    "weight": 2.0,
                    "volume": 4200.0,
                    "floorage": 600.0,
                    "maxSide": 30.0
                }
            ]
        },
        {
            "uuid": "2",
            "schemeId": 2,
            "aeromatBoxLocationList": [
                {
                    "uuid": "2",
                    "squareCode": 1,
                    "subBoxFloorage": 224440.0,
                    "subBoxHeight": 492.0,
                    "ceSeq": "1030000048",
                    "name": "1111",
                    "model": "CYT-168",
                    "importance": "3",
                    "weight": 5.0,
                    "volume": 2000.0,
                    "floorage": 400.0,
                    "maxSide": 20.0
                },
                {
                    "uuid": "2",
                    "squareCode": 1,
                    "subBoxFloorage": 224440.0,
                    "subBoxHeight": 492.0,
                    "ceSeq": "1030000048",
                    "name": "2222",
                    "model": "CYT-168",
                    "importance": "3",
                    "weight": 5.0,
                    "volume": 2000.0,
                    "floorage": 400.0,
                    "maxSide": 20.0
                },
                {
                    "uuid": "2",
                    "squareCode": 1,
                    "subBoxFloorage": 224440.0,
                    "subBoxHeight": 492.0,
                    "ceSeq": "1030000048",
                    "name": "3333",
                    "model": "CYT-168",
                    "importance": "3",
                    "weight": 5.0,
                    "volume": 2000.0,
                    "floorage": 400.0,
                    "maxSide": 20.0
                },
                {
                    "uuid": "2",
                    "squareCode": 1,
                    "subBoxFloorage": 224440.0,
                    "subBoxHeight": 492.0,
                    "ceSeq": "1030000107",
                    "name": "4444",
                    "model": "TS3-2281",
                    "importance": "3",
                    "weight": 67.0,
                    "volume": 2800.0,
                    "floorage": 400.0,
                    "maxSide": 20.0
                },
                {
                    "uuid": "2",
                    "squareCode": 2,
                    "subBoxFloorage": 448880.0,
                    "subBoxHeight": 492.0,
                    "ceSeq": "1030000050",
                    "name": "5555",
                    "model": "TS3-228",
                    "importance": "3",
                    "weight": 2.0,
                    "volume": 4200.0,
                    "floorage": 600.0,
                    "maxSide": 30.0
                },
                {
                    "uuid": "2",
                    "squareCode": 2,
                    "subBoxFloorage": 448880.0,
                    "subBoxHeight": 492.0,
                    "ceSeq": "1030000050",
                    "name": "6666,
                    "model": "TS3-228",
                    "importance": "3",
                    "weight": 2.0,
                    "volume": 4200.0,
                    "floorage": 600.0,
                    "maxSide": 30.0
                },
                {
                    "uuid": "2",
                    "squareCode": 2,
                    "subBoxFloorage": 448880.0,
                    "subBoxHeight": 492.0,
                    "ceSeq": "1030000103",
                    "name": "7777",
                    "model": "KFS-281",
                    "importance": "1",
                    "weight": 5.0,
                    "volume": 1000.0,
                    "floorage": 1000.0,
                    "maxSide": 50.0
                },
                {
                    "uuid": "2",
                    "squareCode": 2,
                    "subBoxFloorage": 448880.0,
                    "subBoxHeight": 492.0,
                    "ceSeq": "1030000103",
                    "name": "8888",
                    "model": "KFS-281",
                    "importance": "1",
                    "weight": 5.0,
                    "volume": 1000.0,
                    "floorage": 1000.0,
                    "maxSide": 50.0
                },
                {
                    "uuid": "2",
                    "squareCode": 2,
                    "subBoxFloorage": 448880.0,
                    "subBoxHeight": 492.0,
                    "ceSeq": "1030000103",
                    "name": "9999",
                    "model": "KFS-281",
                    "importance": "1",
                    "weight": 5.0,
                    "volume": 1000.0,
                    "floorage": 1000.0,
                    "maxSide": 50.0
                }
            ]
        }
]

4. 下面是el-table中自带的span-method方法绑定的函数objectSpanMethod

row.squareCode代表每一行数据的唯一标识，也是合并数据时判断的唯一标识

objectSpanMethod(row, column, rowIndex, columnIndex, data) {
      // 获取当前行的唯一标识
      let squareCode = row.squareCode;
     // columnIndex 代表每一列的index值，<=2是指前三列
      if (columnIndex <= 2) {
        if (!rowIndex || data[rowIndex - 1].squareCode !== squareCode) {
          let _row,
            _col = 1;
          let startIndex = rowIndex; // 找到每行相同标识的起始位置
          let endIndex = data.findLastIndex(
            (item) => item.squareCode === squareCode
          );  // 找到每行相同标识的末尾位置
          _row = endIndex - startIndex + 1;
          console.log('[_row, _col]',[_row, _col]);
          return [_row, _col];
        } else {
          return [0, 0];
        }
      }
    },

丘比特没有箭#
关注
  • 4
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
10-17
总之，理解并熟练掌握Vue的`v-for`指令以及如何与ElementUI的`el-table`组件配合，是构建灵活可扩展的表格的关键。通过动态生成列，可以极大地提高代码的可维护性和复用性。希望这篇文章能对你在开发过程中有所帮助...
element-ui中el-table多层数组渲染问题
szzlh123456789的博客
05-17 184
【代码】element-ui中el-table多层数组渲染问题。
el-table-column 使用 v-for 中el-table遍历数某个字段，多层嵌套时处理数组
阿韩的经验分享博客
03-19 9785
el-table-column 使用 v-for 中el-table遍历数某个字段，多层嵌套时处理数组 数据
el-table表格动态合并行、合并行列及详解_el-table 合并行
最新发布
2401_85124666的博客
06-12 1900
在写项目的时候有时候会经常遇到把行和列合并起来的情况，因为有些数据是重复渲染的，不合并行列会使表格看起来非常的混乱，如下： 而我们想要的数据是下面这种情况，将重复的行进行合并，使表格看起来简单明了，如下： 所谓的合并行就是将多行相同的数据变成一行来显示，直接上代码，页面的布局比较简单 是el-table上属性，其值是一个，objectSpanMethod方法是用来处理合并行的返回值，tableData数据如下： 首先需要对数据就行处理，就是比较当前行与上一行的值是否相等（如果是第一行数据，直接将值赋值为1）
【vue】element-ui、el-table使用V-for循环动态添加表头和数据
蓝胖子的博客
03-17 1万+
【vue】element-ui、el-table使用V-for循环动态添加表头和数据
element-ui、el-table使用V-for循环动态添加表头和数据
xz1589155358的博客
08-30 6929
element-ui、el-table使用V-for循环动态添加表头和数据
element-ui el-table表格动态v-for渲染表格
weixin_44021888的博客
06-16 5036
elementui el-table根据返回数据for循环并显示
el-table-column使用v-for展示数据，＜template #defalut=“scope“＞不生效
weixin_45563717的博客
08-12 6168
el-table-column使用v-for展示数据，针对展示需要处理的数据使用平常的不生效该如何解决
v-for 中el-table遍历自定义的列，嵌套显示
qq_30815659的博客
12-26 2819
原文链接：v-for 中el-table遍历自定义的列，嵌套显示_Record Life的博客-CSDN博客_el-table for colunmName: ['澳中线-悉尼-仓库', '澳中线-悉尼-仓库1'], totalNumber: 100, data: [{ list: [ { name: '澳中线-悉尼-仓库1', value:...
el-table-infinite-scroll:El-Table无限滚动
05-26
element-ui 的表格与无限滚动的结合（el-table + infinite-scroll）。查看实例教程此指令依赖于 element-ui@2.12.0，使用前请熟悉：element-ui@2.12.0element-ui@2.12.0安装npm install --save el-table-infinite-...
el-table树形表格表单验证(列表生成序号)
10-15
在本文中，我们将深入探讨如何在使用Element Plus的`el-table`组件实现树形表格时进行表单验证以及如何生成序号。`el-table`是一个强大的数据展示组件，支持多种复杂的表格布局和功能，包括树形结构。在处理树形表格...
el-table合并列 合并单元格
09-03
el-element中el-table合并单元格 合并列。无限制列合并。通过循环数据源数据获取该列需要合并的行数。
elementui的el-table的v-for遍历二维数组显示
热门推荐
青烟小生的博客
09-25 2万+
elementUI的el-table的循环遍历二维数组，v-for循环遍历二维数组并且显示成表格的形式 这些其实就是Excel表格的数据转化下来先是查看数组类型的样式全部的数据 async reafXls(){ let res = await this.$api.teaback.readXls() console.log(res); this.dataList = res.excelObj this.goodsList = res.excelObj.slice(
使用v-for循环遍历element-ui的表格
jinann0的博客
01-11 5383
由于页面设计的功能要求，所以，页面的表格头以及表格的数据都是由后端返回来的，所以我们通过axios获取接口的数据后，通过v-for循环遍历表格的全部数据
【el-table 动态表格添加一列与 v-for和v-if优先级等问题】
weixin_41464814的博客
03-14 1715
el-table 动态表格添加一列与 v-for和v-if优先级等问题
v-for遍历渲染el-table-column
weixin_43588661的博客
07-30 655
加入this.$refs.xxx.doLayout()发现 tittleList第一次更新后列表不变化蛋痛！，多次调试后发现第二次没变化第三次还是变化了但是更新的是第二次tittleList更新的值，卧槽离了大普，各种查证各种找资料mmp，还是没找到原因，加入updated里面设置定时器还是不行非要第三次更新后才会更新值，救命！使用v-for渲染表头。
使用el-table-column进行v-for循环的时候，把没值的数据设置默认值
m0_59866133的博客
07-19 1683
{{ scope.row[column.prop] }}</span> <span v-else>默认值
el-table实现Excel合并行合并列
03-08
el-table是Element UI框架中的一个表格组件，可以用于展示和编辑数据。要实现Excel中的合并行和合并列功能，可以使用el-table的特定属性和方法。 要实现合并行，可以使用el-table的span-method属性。该属性接受一个函数，用于计算每个单元格的合并行数。在函数中，可以根据当前单元格的值和相邻单元格的值来判断是否需要合并行，并返回合并行数。 要实现合并列，可以使用el-table-column的prop属性。该属性指定了当前列对应数据对象中的字段名。如果多个列的prop属性相同，那么这些列将会合并为一列。 下面是一个示例代码，演示了如何使用el-table实现合并行和合并列： ```html <template> <el-table :data="tableData" :span-method="handleSpanMethod"> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> <el-table-column prop="gender" label="性别"></el-table-column> </el-table> </template> <script> export default { data() { return { tableData: [ { name: '张三', age: 18, gender: '男' }, { name: '李四', age: 20, gender: '女' }, { name: '王五', age: 18, gender: '男' }, { name: '赵六', age: 22, gender: '女' }, ], }; }, methods: { handleSpanMethod({ row, column, rowIndex, columnIndex }) { if (columnIndex === 0) { // 判断当前列是否为第一列 if (rowIndex === 0 || row.name !== this.tableData[rowIndex - 1].name) { // 判断当前行是否为第一行或者与上一行的name字段值不同 const rowspan = this.getRowspan(row.name, columnIndex); if (rowspan > 1) { return { rowspan, colspan: 1, }; } } } }, getRowspan(name, columnIndex) { let rowspan = 1; for (let i = 1; i < this.tableData.length; i++) { if (this.tableData[i].name === name) { rowspan++; } else { break; } } return rowspan; }, }, }; </script> ``` 在上述代码中，handleSpanMethod函数用于计算每个单元格的合并行数。getRowspan函数用于计算每个姓名相同的单元格的合并行数。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值