Vue+Element-ui 树型+懒加载＜根据相同字段合并表格＞

已于 2022-08-25 15:19:26 修改
阅读量1.4k 收藏 5
点赞数
CC 4.0 BY-SA版权
分类专栏： vue 文章标签： elementui 前端 javascript
于 2022-08-25 15:11:57 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_36702286/article/details/126524914
本文介绍如何使用Vue实现表格的合并与懒加载功能，包括处理不同版本的Vue组件、利用expand-change事件进行折叠展开控制及通过span-method实现单元格合并。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

本人处理合并踩坑小记

踩坑注意事项：expand-change  树形展开折叠 至少要在 2.9.2 以上版本才有返回

2.8.2

​​​​​​​

 

2.9.2+

 

首先看官网的table 树形懒加载案例

需求：1、根据num 返回值  为表格序列号 ，父子级中的num值相同 ，序列号相同  合并单元格

思路： 1、利用官网树形数据与懒加载例子

            2、无序序号，将type=""设置为空  防止箭号防止第一格

           3、 expand-change折叠展开触发事件、:span-method 处理合并单元格

            4、考虑是可多出展开折叠转态，遍历数组 父级数据都添加expanded：false默认折叠，根据点击当前行expand-change  返回状态  修改对应的expanded值 达到管理展开折叠的目的

            5、如果是load懒加载  可根据lload返回row的值 遍历对应当前二级数据 对应的父级 添加cound记录子级长度；如果数组中直接children时，直接遍历获取children的长度即可。

            6、综上，根据expanded和cound计算第一列相同序列号合并的目的

代码如下：

<template>
    <div>
        <!--<el-table-->
                <!--ref="refTable"-->
                <!--:data="tableData1"-->
                <!--style="width: 100%"-->
                <!--row-key="id"-->
                <!--border-->
                <!--lazy-->
                <!--:load="load"-->
                <!--:tree-props="{children: 'children', hasChildren: 'hasChildren'}"-->
                <!--@expand-change="expandChange"-->
                <!--:span-method="objectSpanMethod">-->
            <!--<el-table-column type="" width="50" label="序号" fixed align="center">-->
                <!--<template slot-scope="scope">-->
                    <!--<span>{{scope.row.num}}</span>-->
                <!--</template>-->
            <!--</el-table-column>-->
            <!--<el-table-column-->
                    <!--prop="date"-->
                    <!--label="日期"-->
                    <!--align="center" fixed-->
                    <!--width="180">-->
            <!--</el-table-column>-->
            <!--<el-table-column-->
                    <!--prop="name"-->
                    <!--label="姓名" fixed-->
                    <!--width="120">-->
            <!--</el-table-column>-->
            <!--<el-table-column label="配送信息">-->
                <!--<el-table-column-->
                        <!--prop="name"-->
                        <!--label="姓名">-->
                <!--</el-table-column>-->
                <!--<el-table-column label="地址">-->
                    <!--<el-table-column-->
                            <!--prop="province"-->
                            <!--label="省份"-->
                            <!--width="120">-->
                    <!--</el-table-column>-->
                    <!--<el-table-column-->
                            <!--prop="city"-->
                            <!--label="市区"-->
                            <!--width="120">-->
                    <!--</el-table-column>-->
                    <!--<el-table-column-->
                            <!--prop="address"-->
                            <!--label="地址"-->
                            <!--width="300">-->
                    <!--</el-table-column>-->
                    <!--<el-table-column-->
                            <!--prop="zip"-->
                            <!--label="邮编"-->
                            <!--width="520">-->
                    <!--</el-table-column>-->
                <!--</el-table-column>-->
            <!--</el-table-column>-->
        <!--</el-table>-->
        <el-table
                :data="tableData"
                style="width: 100%;margin-bottom: 20px;"
                row-key="id"
                border
                :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
                @expand-change="expandChange"
                :span-method="objectSpanMethod">
            <el-table-column type="" width="50" label="序号" fixed align="center">
                <template slot-scope="scope">
                    <span>{{scope.row.num}}</span>
                </template>
            </el-table-column>
            <el-table-column
                    prop="date"
                    label="日期"
                    sortable
                    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>
    </div>
</template>

<script>
  export default {
    name: 'ReportTable',
    data() {
      return {
        expandNum: 0, // 折叠 展开序列号
        expandTrue: false, // 展开 true  折叠 false
        tableData1: [
          {
            id: 100,
            num: '',
            date: '净利润',
            name: '王小虎0',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1518 弄',
            zip: 200333
          },
          {
            id: 101,
            num: '',
            date: '营业收入',
            name: '王小虎1',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1518 弄',
            zip: 200333
          }, {
            id: 102,
            num: '',
            date: '一级费用总合计',
            name: '王小虎2',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1518 弄',
            zip: 200333
          }, {
            id: 1,
            num: 1,
            date: '2016-05-03',
            name: '王小虎3',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1518 弄',
            zip: 200333
          }, {
            id: 2,
            num: 2,
            date: '2016-05-03',
            name: '王小虎4',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1518 弄',
            zip: 200333
          }, {
            id: 3,
            num: 3,
            date: '2016-05-01',
            name: '王小虎5',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1519 弄',
            hasChildren: true
          }, {
            id: 4,
            num: 4,
            date: '2016-05-03',
            name: '王小虎6',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1518 弄',
            zip: 200333
          }],
        tableData: [
          {
            id: 100,
            num: '',
            date: '净利润',
            name: '王小虎0',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1518 弄',
            zip: 200333,

          },
          {
            id: 101,
            num: '',
            date: '营业收入',
            name: '王小虎1',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1518 弄',
            zip: 200333
          },
          {
            id: 102,
            num: '',
            date: '一级费用总合计',
            name: '王小虎2',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1518 弄',
            zip: 200333
          },
          {
            id: 1,
            num: 1,
            expandTrue: false,
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          },
          {
            id: 2,
            num: 2,
            expandTrue: false,
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄',
            children: [
              {
                id: 21,
                num: 2,
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄'
              }
            ]
          },
          {
            id: 3,
            num: 3,
            expandTrue: false,
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄',
            children: [
              {
                id: 31,
                num: 3,
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄'
              },
              {
                id: 32,
                num: 3,
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄'
              }
            ]
          },
          {
            id: 4,
            num: 4,
            expandTrue: false,
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }
        ],
        newTableData: [],
      }
    },
    mounted(){
      this.newTableData = JSON.parse(JSON.stringify(this.tableData));
      this.changeData();
    },
    methods: {
      expandChange(row, expanded) {
        this.expandNum = row.num;
        this.expandTrue = expanded;
        let i = this.findExpandChange(row);
        this.tableData[i].expandTrue = this.expandTrue; // expandTrue 折叠/展开的状态
      },
      // 返回当前折叠/展开  在数组下标
      findExpandChange(row) {
        let id1 = this.tableData.findIndex((arr) => arr.num == row.num); //id1为对象的数组下标
        return id1
      },
      load(tree, treeNode, resolve) {
        let arr = [
          {
            id: 31,
            num: 3,
            date: '2016-05-01',
            name: '王小虎31',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1518 弄',
            zip: 200333
          }, {
            id: 32,
            num: 3,
            date: '2016-05-01',
            name: '王小虎32',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1518 弄',
            zip: 200333
          }
        ]
        resolve(arr);

      },
      // changeData  用于记录子级长度 来计算合并单元格个数
      changeData () {
        this.newTableData.forEach((item, itemIndex) => {
          let count = 0;
          if (item.children && item.children.length) {
            count += item.children.length;
          }
          this.tableData[itemIndex].count = count;
        })
      },
      objectSpanMethod({row, column, rowIndex, columnIndex}) {
        if (row.num !== '') {
          if (columnIndex === 0) {
                if(row.count==0 || row.count > 0) {
                  let rowspan = 0
                  if (row.expandTrue) {
                    rowspan = row.count + 1;
                  } else {
                    rowspan = 1;
                  }
                  return [rowspan, 1]
                } else {
                  return [0, 0];
                }
          }
        } else {
          if (columnIndex === 0) {
            return [0, 0];
          } else if (columnIndex === 1) {
            return [1, 2];
          } else if (columnIndex > 1) {
            return [1, 1];
          } else {
            return [0, 0];
          }
        }
      }
    }
  }
</script>

<style scoped>

</style>

vue+element实现树状表格的增删改查；使用el-table树形数据与懒加载实现树状表格增删改查
m0_67391401的博客
03-09 5342
以下代码可以直接复制使用 一、情景： 列表是一个树状表格，可以无限添加下级，以及对列表的某一行进行增删改查（目前查没有写）。 原博链接 二、本篇是在原博主的代码基础上添加了部分功能。 功能1： 给树状表格添加虚线部分，可以更清楚树节点层级关系 功能2： 某行数据可以直接输入框编辑，也可以点击编辑按钮打开弹框编辑 功能3： 我这里树状节点一共有三种： –①顶级根节点first： 只会有最外层一个 默认就有的 可以添加下级【夹】、【页】节点 –②中间夹节点middle： 通过点击【夹】节点按钮添加来的，.
基于element-ui的table实现树级表格操作及单元格合并
trottoir-blog
10-31 4999
基于element-ui的table，在一张表内实现多级树状数据展示及同属性的单元格合并，并在表格内实现增删改操作。
Element-ui树形控件el-tree自定义增删改和局部刷新及懒加载操作
10-14
主要介绍了Element-ui树形控件el-tree自定义增删改和局部刷新及懒加载操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue?elementUI实现树形结构表格与懒加载
菜鸟教程
04-27 2290
文章来源： 学习通http://www.jaxp.net/ 目录1、实现效果2、后端实现2.1 实体类2.2 数据库中的数据结构2.3 后端接口2.4 swagger测试后端结构功能是否正常3、前端实现3.1 页面中引入el-table组件3.2 实现效果1、实现效果 2、后端实现 2.1 实体类 @Data @ApiModel(description = "数据字典") @TableName("dict") public class Dict { private static final long
Vue el-tree树状图进行懒加载功能实现
最新发布
K_ing3的博客
05-15 519
通过lazy开启动态加载，并通过lazyload来设置加载数据源的方法。lazyload方法有两个参数，第一个参数node为当前点击的节点，第二个resolve为数据加载完成的回调(必须调用)。为了更准确的显示节点的状态，还可以对节点数据添加是否为叶子节点的标志位 (默认字段为leaf，可通过props.leaf修改)。否则，将以有无子节点来判断其是否为叶子节点。
el-table 表格懒加载的同时合并单元格
ingenuou_的博客
11-03 2193
el-table 表格懒加载的同时合并单元格
vue3+＜script setup＞+element-plus中的el-table树形数据与懒加载
m0_59642018的博客
12-11 1781
【代码】vue3++element-plus中的el-table树形数据与懒加载。
element table表格根据某一字段合并列
weixin_46189958的博客
11-03 976
element table表格根据某一字段合并列
【JavaScript源代码】vue Element-ui表格实现树形结构表格.docx
12-29
Vue.js 是一种流行的前端JavaScript框架，它提供了丰富的...总之，这个示例展示了如何使用Vue.js和Element UI的Table组件创建具有树形结构的表格，同时处理数据异步加载和分页功能，为用户提供了直观且交互性强的界面。
一个基于vue和element-ui的树形穿梭框组件
qq_15390381的博客
03-30 4103
#el-tree-transfer ##简介·请先阅读文档及版本说明 因为公司业务使用vue框架，ui库使用的element-ui。在市面上找到一个好用的vue树形穿梭框组件都很难，又不想仅仅因为一个穿梭框在element-ui之外引入其他重量级插件，因此就有了el-tree-transfer。轻量，易用，无需投入其他学习成本。 el-tree-fransfer是一个基于VUE和element-u...
elementui树状菜单tree_Java + Element-UI 实现简单的树形菜单
weixin_39682301的博客
02-06 1837
一、简单入门级树形菜单实现(纯后台逻辑)1、简介(1)开发环境IDEA + JDK1.8 + mysql 1.8SpringBoot 2.2.6 + mybatis-plus此处仅后台开发(返回 json 数据)，前台页面展示后续会讲解。(2)数据表如下，仅供参考，可以添加 修改时间、创建时间、逻辑删除等字段。DROP DATABASE IF EXISTS test;CREATE DATABASE...
element树形控件懒加载的动态加载
09-08
利用element树形控件菜单栏被触发时加载事件进行Element树形结构懒加载的动态加载。
vue 实现数据滚动显示_vue elementUI table表格数据 滚动懒加载的实现方法
weixin_39948824的博客
12-19 4506
在项目中遇到了一个性能问题vue+elementUI table表格展示数据，当数据很多的时候，不能一页显示完，同时一次请求数据量太大，会增加网页渲染的时间，影响体验，这个时候常常有两种方法处理，1、分页，如下2、如果我不想分页，又想在一页显示全部数据呢？这个时候其实就可以用数据懒加载了如下一开始表格只显示31行数据当将滚动条拉到低的时候，就会再加载31条数据，如果剩下的数据不...
表格根据设置字段动态合并---element-ui
wpb的博客
11-08 357
动态按照需要合并的表格数据字段进行表格单元格合并
【elementUI Tree 树形控件 动态加载数据、懒加载&&动态操作后局部刷新树结构】
m0_55546349的博客
06-16 7681
【elementUI Tree 树形控件 动态加载数据、懒加载&&动态操作后局部刷新树结构】
vue3+TS+elementplus记录element-plus 树形控件 懒加载树
什么意思哦
03-16 3855
记录一下 懒加载传数据 树形组件懒加载 需要添加lazy属性，load方法才会生效 load属性需要传入一个该树形节点加载时所调用的函数 load函数接收两个参数，一个是node,即当前节点，一个是resolve作为数据处理函数 <template> <el-row> <el-col :span="9"> <div class="tree"> <el-scrollbar> &.
【 elementUI---Tree树形控件 】---懒加载自定义子节点
tomtomgogo的博客
01-18 3032
如果是第二层及以上，则需要携带参数发送请求（根据传参数不同，这里是获取点击的数据中的cid作为参数发送请求）在项目中，通常面临这样的需求：一级菜单点击后会出现二级菜单，并且点击一级菜单发送的请求返回的数据是二级菜单内容。如果返回的数据已经是层级数据，不需要每点击一次渲染下一级子菜单，则只需要使用基础用法稍加修改即可。childNodes：这里是当前节点数据，有5个代表这一层目录有条目录渲染。：是一个回调函数resolve（data），里面需要传入参数data，作为下一级菜单数据。label：节点名称。
element UI 表格 固定字段合并问题 ，动态数据 实现 合并
书山有路勤为径，学海无涯苦作舟
03-28 255
合并前 表格 数据 张三（23条数据）、李四（17条数据）、王五 （22条数据）data 中 添加 两个 变量。组件 关键代码。
element树形结构表格与懒加载
冲出仁川，走出马德里，故事还会再继续
01-01 2174
树形表格与懒加载1、实现效果2、后端实现2.1 实体类2.2 数据库中的数据结构2.3 后端接口2.4 swagger测试后端结构功能是否正常3、前端实现3.1 页面中引入el-table组件3.2 实现效果 1、实现效果 2、后端实现 2.1 实体类 @Data @ApiModel(description = "数据字典") @TableName("dict") public class Dict { private static final long serialVersionUID = 1
vue elementui table 实现树形数据 :tree-props=[]，表头有序号，申请时间，申请人等，在申请时间的表内有展开收起的icon, 点击后，展示里面的多条数据，并且可动态合并前两个单元格
11-20
在Vue.js中，结合Element UI库来实现树形表格，你可以这样做： 首先，确保已安装Element UI以及Vue CLI项目中。树形数据通常通过`<el-tree>`组件来呈现，而数据结构需要包含`children`属性用于表示子节点。对于你...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值