element table树型表格懒加载

最新推荐文章于 2024-07-29 14:49:14 发布
最新推荐文章于 2024-07-29 14:49:14 发布
阅读量1.3w 收藏 19
点赞数 6
分类专栏： # Vue2.6+
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_empire/article/details/90715283
版权

 1，绑定 :load="load"

<el-table :data="list" :header-cell-style="{background:'#e9eff8'}" 
     row-key="dictId" lazy :row-style="{cursor:'pointer'}"  
     :load="load"  border size="mini" v-loading="loading">
   
</el-table>

data数据

data() {
    return {
               
      list: [],    
      uploadData:{
        tree:null, 
        treeNode:null, 
        resolve:null
      }
    }
},

 

2，把需要加载的下级数据传入resolve(data)

//搜索
getList() {
    this.loading = true;
    apiDictionarySearch(this.form).then(res => {
        this.total = res.total;
        res.data.forEach(item => {
            item.hasChildren = [];
            this.listArr.push(item)
        })
        this.list = res.data;
        this.loading = false;
    })
},
 load(tree, treeNode, resolve) {
        // tree为点击那一行的数据
        this.uploadData.tree = tree;
        this.uploadData.treeNode = treeNode;
        this.uploadData.resolve = resolve;

        let value = tree.dictValue;
        apiCommonDictionAry(value).then(res => {
            res.dicList.forEach(item => {
               //判断是否有子节点
                if (item.isParent > 0) {
                    item.hasChildren = []
                }
                this.listArr.push(item)
            });
            //传入res.dicList加载下一级
            resolve(res.dicList);
            if (res.dicList.length == 0) {
                this.$message({
                    type: 'error',
                    message: '本节点以下暂无子节点!'
                });
            }
        })

    },

 删除事件（可以及时看到删除后的数据）

//删除按钮事件
delateFunction(index,data) {
    this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        apiDictionaryDelete(data.dictId).then(() => {
            this.$message({
                type: 'success',
                message: '删除成功!'
            });
            this.getList();
            this.load(this.uploadData.tree,this.uploadData.treeNode,this.uploadData.resolve);
        })
    })
},

  添加和修改方法后也调用一下load方法（可以及时看到修改或添加的内容）

 <!-- 编辑&添加弹框组件 -->
        <change-edit :caseProcessList="caseProcessList" :child="editObj.child" :list="list" :listArr="listArr"
                     :parent="editObj.parent" :uploadData="uploadData"
                     :show.sync="editObj.show" :title="editObj.title"
                     :type="editObj.editId" @getList="getList" :load="load"/>

 组件内容

<template>
    <div>
        <el-dialog :close-on-click-modal='false' :title="title" :visible="show" @close="closeDialog" center
                   width="550px">
            <el-form :model="form" :rules="rules" label-width="130px" ref="ruleForm" size="medium"
                     v-loading="loading">
                <el-row>

                   自己的内容

                </el-row>
            </el-form>

            <span class="dialog-footer" slot="footer">
                <el-button @click="closeDialog" size="small" type="info">
                    <i class="lj_font icon_quxiaofanhui"></i>取 消
                </el-button>
                <el-button @click="submitForm('ruleForm')" size="small" type="primary">
                    <i class="lj_font icon_baocun"></i>确 定
                </el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
    import {apiDictionaryAdd, apiDictionaryGet, apiDictionaryUpdate} from "../../../../api/system";

    export default {
        name: 'edit',
        props: {
            //证据类型数组listArr
            list: {
                type: Array,
                default: []
            },
            listArr: {
                type: Array,
                default: []
            },
            caseProcessList: {
                type: Array,
                default: []
            },
            show: {
                type: Boolean,
                default: false
            },
            title: {
                type: String,
                default: '编辑'
            },
            type: {
                type: String,
                default: ''
            },
            child: {
                type: Number,
                default: ''
            },
            parent: {
                type: Number,
                default: ''
            },
            uploadData:{
                type:Object,
                default:{}
            },
            load: {
                type: Function,
                default: null
            }
        },

        data() {
            return {
              
                loading: true,
                wordvalue: '',
                form: {},
               

            }
        },
        methods: {
            closeDialog() {
                this.$emit('update:show', false)
            },

            submitForm() {
                this.$refs.ruleForm.validate((valid) => {
                    if (valid) {
                        if (this.type) {
                            let tree = this.uploadData.tree;
                            let treeNode = this.uploadData.treeNode;
                            let resolve = this.uploadData.resolve;
                            if (!this.child) {
                                //编辑
                                this.loading = true;
                                apiDictionaryUpdate(this.form).then(res => {
                                   
                                    this.$emit("getList");
                                    this.load(tree,treeNode,resolve)
                                    this.$message({
                                        type: 'success',
                                        message: '修改成功!'
                                    });
                                    this.loading = false;
                                    this.closeDialog();
                                }).catch(res=>{
                                     this.loading = false;
                                })
                            } else {
                                //添加子集
                                this.loading = true;
                                apiDictionaryAdd(this.form).then(res => {
                                    this.$emit("getList");
                                    this.load(tree,treeNode,resolve)
                                    this.$message({
                                        type: 'success',
                                        message: '添加成功!'
                                    });
                                    this.loading = false;
                                    this.closeDialog();
                                }).catch(res=>{
                                     this.loading = false;
                                })
                            }

                        } else {
                            //添加父级
                            this.loading = true;
                            apiDictionaryAdd(this.form).then(res => {
                                this.$emit("getList");
                                this.$message({
                                    type: 'success',
                                    message: '字典添加成功!'
                                });
                                this.loading = false;
                                this.closeDialog();
                            }).catch(res=>{
                                this.loading = false;
                            })
                        }
                    }
                });
            },

            //弹框弹出时获取data给form
            initPage() {
                if (this.type) {
                    //修改
                    if (!this.child) {
                        apiDictionaryGet(this.type).then(res => {
                            this.form = res.data;
                            this.form.isDisable = String(res.data.isDisable);
                            this.loading = false;
                            let parid = this.form.subDict;
                            let filtObj = this.listArr.find(item => {
                                return item.dictValue === parid
                            });
                            if (filtObj) {
                                this.form.parentName = filtObj.dictName
                            } else {
                                this.form.parentName = "根节点"
                            }
                        });
                    } else {
                        //新增子节点
                        this.loading = false;
                        apiDictionaryGet(this.type).then(res => {
                            this.form = res.data;
                            this.form.subDict = res.data.dictValue;
                            this.form.isDisable = '1';
                            this.form.parentName = this.form.dictName
                            this.form.dictName = '';
                            this.form.dictValue = '';
                            this.form.dictOrder = '';
                            this.form.isBase = 0;
                        });
                    }

                } else {
                    //新增根节点
                    this.loading = false;
                    //根节点
                    this.form = {
                        dictName: '',
                        dictValue: '',
                        subDict: '',
                        isBase: '1',
                        // isSys:'',
                        isDisable: '',
                        dictOrder: ''
                    };
                }

            }
        },
        //监听，如果show为true,则执行initPage()
        watch: {
            show(value) {
                if (value) {
                    this.initPage();
                    this.$nextTick(() => {
                        this.$refs.ruleForm.clearValidate();
                    })
                }
            },

        },
    }
</script>
<style lang='less' scoped>
    
</style>

 

 

效果图

QQ帝国
关注
专栏目录
vue2/3 - element表格组件el-table实现懒加载树型(上下级)数据、默认展开和隐藏层级，支持对表格进行修改|新增|删除，解决完成操作后树节点不刷新问题（提供示例代码，一键复制开箱即用
高级前端工程师
03-21 3408
vue2，vue3，elementui，elementPlus，el-table，Table表格组件，表格懒加载数据，element table表格数中的树形结构懒加载，增加后数据不同步更新问题，el-table树形与el-tree树形结构的一键折叠与展开，elementui中el-tree懒加载数据 默认展开最外层节点，Element-plus Table组件树表结构默认展开一级目录，vue实现element table表格树形结构-使用懒加载时-解决子节点增删改后，不刷新子节点数据问题，解决el-tre
使用element-plus table表格中的树形数据与懒加载，解决VUE3中不能使用vue-table-with-tree-grid（黑马电商管理系统项目）
ajin711的博客
10-16 2590
vue3不能使用vue-table-with-tree-grid组件，上网搜了一下没有搜到vue3可以使用的类似组件，最后用element-plus table表格中的树形数据与懒加载解决了问题。
el-table 懒加载，后端传了整体list带children，前端如何自行去处理
Rainliangr的博客
10-19 431
el-table 懒加载，后端传了整体list带children，前端如何自行去处理
element Table 表格懒加载多级
coldriversnow的专栏
05-20 1058
代码如下： <el-table :data="tableData1" style="width: 100%" row-key="id" border lazy :load="load" :tree-props="{children: 'children', hasChildren: 'hasChildren'}"> <el-table-column prop="date" label="日期"..
ElementUI树形表格实现
最新发布
Hhzzy99的博客
07-29 581
通过本文的介绍，我们学习了如何使用 ElementUI 实现树形表格，包括基本的组件使用、数据结构的定义以及如何展示树形结构。希望这些内容对你有所帮助，在实际项目中能够灵活运用这一强大的组件来展示层级数据。如果你有任何问题或建议，欢迎在下方留言讨论。
Element UI表格的树形数据与懒加载
qq_42931285的博客
04-25 859
elment UI表格的树形数据与懒加载 最终实现的效果是当点击某个单元格的时候，会去后台请求数据，并将结果确认在表格中。 具体实现： row-key是数据中的某个唯一的属性值，例如id,也可以为其他的值。 tree-props=“｛children：‘children‘,hasChildren:‘hasChildren‘}“ lazy :load=“load” 其中load方法如下： async load（tree,treeNode,resolve){ let data=await getData();
el-table 实现懒加载 异步获取的数据
monicateacat的博客
06-29 1996
tree参数表示当前位置节点信息的.需要查询吧tree参数的属性赋值一下就可以查询了.因为本身就是异步获取数据,有一定的时间差,当然加上也是完全没问题滴.那么我们自己从后端获取的数据有何变化,又如何写呢。伪代码附上,调用自己的api获取数据,即可.hasChildren 布尔值属性要有的,el-ui官网的懒加载栗子是固定写的数据。html部分可以完全拷贝,没有问题的.建议去除setTimeout部分。方法没错数据都可以正常展示的,重要的是数据的格式,
element UI el-table 树形表格 懒加载 折叠表格 死循环 id不可重复问题
weixin_50448781的博客
07-22 1821
//template部分 <el-table ref="schoolTable" :data="schoolList" border :row-key="onlyId"//指定唯一的key值 style="width: 100%" class="margin-bottom-20" v-loading="schoolListLoading" lazy//懒加载这个也要配置 :lo
vue+element实现树状表格的增删改查；使用el-table树形数据与懒加载实现树状表格增删改查
m0_67391401的博客
03-09 5142
以下代码可以直接复制使用 一、情景： 列表是一个树状表格，可以无限添加下级，以及对列表的某一行进行增删改查（目前查没有写）。 原博链接 二、本篇是在原博主的代码基础上添加了部分功能。 功能1： 给树状表格添加虚线部分，可以更清楚树节点层级关系 功能2： 某行数据可以直接输入框编辑，也可以点击编辑按钮打开弹框编辑 功能3： 我这里树状节点一共有三种： –①顶级根节点first： 只会有最外层一个 默认就有的 可以添加下级【夹】、【页】节点 –②中间夹节点middle： 通过点击【夹】节点按钮添加来的，.
第十篇 ElementUI 树形表格懒加载-新增修改删除等操作进行局部刷新数据
Yzt_199626的博客
05-22 6346
该篇的模拟的功能：ElementUI 树形表格懒加载数据展示，并对某列数据进行相应操作(新增，修改和删除)，并对列表进行局部的数据刷新。 模拟效果图如下： 1. 注意到到点的就是，后端返回的数据结构类型中，每一层级都得包含父级的标识，如下的 parentId 的父级的 id为 0，自己的 id 为1： { id: 1, parentId: 0, date: '2016-05-02', name: '王
html table 行树展开,element中树形数据与懒加载实现全部展开和全部收起
weixin_39928768的博客
06-03 1249
element中属性懒加载数据default-expand-all属性：：是否默认展开所有行，当 Table 包含展开行存在或者为树形表格时有效如果在表格头上加上一个按钮实现全部展开与收起 类似如图这种默认是【全部展开】按钮，点击后，树状列表下所有数据为展示，按钮变为【全部收起】；点击【全部收起】时，树状列表下所有数据为收起状态，即返回默认状如果动态设置控制default-expand-all...
element树形数据与懒加载失效
qq_38062838的博客
10-03 931
element树形数据与懒加载失效
el-table懒加载刷新
weixin_42464135的博客
02-15 3302
el-table 懒加载刷新问题 问题 列表查询是用element-ui的table组件实现的，数据之间有层级显示，默认只查询显示一级数据，子级数据需要通过load懒加载来查询。由此引发的问题，比如用户查询今天的数据，并load了子级数据，然后再查询昨天的数据，只有一级数据是更新的，二级数据并没有消失形成了脏数据 具体代码实现 html页面 <el-table ref="xxxTable" el-table标签添加ref属性 JS部分 data:{ maps: new Map(), //用于
el-table懒加载树形表格修改数据后重新加载节点
零食粉碎机的博客
11-25 3740
表格组件 <el-table ref="singleTable" v-loading="tableLoading" row-key="id" :data="dataList" :load="load" lazy highlight-current-row
el-table懒加载 Maximum call stack size exceeded
葡萄要吃山竹的博客
03-24 1649
el-table Maximum call stack size exceeded
element 表格嵌套 switch 踩坑
Ydesk116的博客
01-09 280
基于element封装简单表格组件嵌套 switch 开关，附完整代码
elementui表格中switch点击无效问题
YUE
08-22 2240
elementui表格中switch点击无效，页面无响应问题
ElementUi 解决在table中使用el-switch无效
m0_49288919的博客
11-26 2826
elementui表格中使用switch时，插槽一定要标明 slot-scope=“scope” //正常切换 <template slot-scope="scope"> <el-switch v-model="value"> </el-switch> </template> //无效切换 <template slot-scope="scope"> <el-switch v-model="value"> &
使用el-table懒加载树形表格时的注意点
HYeeee的博客
07-22 3481
先放个简单的el-table例子 <el-table ref="refTable" :data="tableData" :load="loadOrgTable" :tree-props="{children: 'children', hasChildren: 'hasChildren'}" row-key="orgId" lazy @expand-change="expandChange" > </el-table> 1、数据显示 1、tableData
vue2中实现树型表格搜索
07-08
在Vue 2中实现树型表格搜索，你可以使用递归的方式来遍历树形结构，并根据搜索条件来过滤数据。 首先，你需要在Vue组件中定义一个data属性来存储树型表格的数据，例如： ```javascript data() { return { tree...
评论 70
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值