elementui树形表格懒加载,vue elementui 树

　　本文主要详细介绍了在Vue组件库ElementUI中实现表加载树数据的教程。本文中的样例代码非常详细，具有一定的参考价值，感兴趣的朋友可以参考一下。

　　UI实现加载表格树列表的教程，供大家参考。具体情况如下

　　Element UI是一套以Vue 2.0为基础框架实现的组件库，是一套面向开发者、设计师、产品经理的基于Vue 2.0的组件库，提供配套的设计资源，帮助网站快速成型。

　　关键代码，在el-table， :tree-props="{children: children}" 添加属性，注意行必须命名为children，官网也解释了：

　　支持树形数据的显示。当行中包含子字段时，它被视为树数据。呈现树数据时必须指定Row-key。支持子节点数据的异步加载。将Table的lazy属性设置为true，并加载函数load。通过指定行中的hasChildren字段来指定哪些行包含子节点。Children和hasChildren可以通过tree-props配置。

　　el表

　　ref=Table

　　:data= apprItemData

　　:header-cell-style=headClass

　　@select=handleSelection

　　row-key=approveItem

　　身高=420

　　边界

　　默认-展开-全部

　　:tree-props= { children: children }

　　El-表格-列

　　type=selection

　　宽度=55

　　/El-表格-列

　　El-表格-列

　　prop=itemCode

　　Label=事件代码

　　/El-表格-列

　　El-表格-列

　　prop=批准名称

　　Label=事件名称

　　/El-表格-列

　　El-表格-列

　　prop=apprStatusStr

　　Label=配置链接

　　color=蓝色

　　/El-表格-列

　　/el-table

　　后台json数据：

　　{

　　id:3，

　　项目代码: 123 ，

　　批准名称:测试项目，

　　ApprStatusStr :链接名称，

　　儿童:[

　　{

　　id:31，

　　项目代码: 111 ，

　　批准名称:测试项目，

　　ApprStatusStr :链接名称

　　}

　　]

　　}

　　脚本类型=text/babel

　　var vm=new Vue({

　　埃尔： #app ，

　　数据：{

　　apprItemData : []，

　　CurrentPage: 1，//当前页面

　　总计：0，//总页数

　　PageSize: 10 //当前显示的条的数量

　　},

　　已计算：{}，

　　观察：{}，

　　已创建(){}，

　　已安装(){

　　this . loaditemdata()；

　　},

　　方法：{

　　//加载事件信息

　　loadItemData () {

　　var pageSize=this.pageSize

　　var current page=this . current page；

　　console . log( pageSize: pageSize ，current page: current page)；

　　//调试器；

　　var geturl= $ { root }/config/loaditemdata . do？rows= pageSize page= current page；

　　$.ajax({

　　键入： get ，

　　url:geturl，

　　content type: application/JSON；charset=utf-8 ，

　　成功：函数(数据){

　　//调试器；

　　console . log( totalRow: data . total )；

　　VM . appritedata=data . rows；

　　},

　　错误：函数(e) {

　　Console.log(更新数据时出错：，e)；

　　}

　　})

　　}

　　}

　　});

　　/脚本

　　这就是本文的全部内容。希望对大家的学习有帮助，支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。