ElementUI实现表格加载树形数据教程
Posted smileNicky
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ElementUI实现表格加载树形数据教程相关的知识,希望对你有一定的参考价值。
ElementUI实现表格树形列表加载教程
Element UI 是一套采用 Vue 2.0 作为基础框架实现的组件库,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库,提供了配套设计资源,帮助网站快速成型
关键代码,在el-table
添加属性,:tree-props="{children: 'children'}"
,注意row必须命名为children
,官网也进行了说明:
支持树类型的数据的显示。当 row 中包含 children 字段时,被视为树形数据。渲染树形数据时,必须要指定 row-key。支持子节点数据异步加载。设置 Table 的 lazy 属性为 true 与加载函数 load 。通过指定 row 中的 hasChildren 字段来指定哪些行是包含子节点。children 与 hasChildren 都可以通过 tree-props 配置。
<el-table
ref="Table"
:data="apprItemData"
:header-cell-style="headClass"
@select="handleSelection"
row-key="approveItem"
height="420"
border
default-expand-all
:tree-props="{children: 'children'}">
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column
prop="itemCode"
label="事项编码">
</el-table-column>
<el-table-column
prop="approveName"
label="事项名称">
</el-table-column>
<el-table-column
prop="apprStatusStr"
label="配置的环节"
color="blue">
</el-table-column>
</el-table>
后台json数据:
{
"id":3,
"itemCode":"123",
"approveName":"测试事项",
"apprStatusStr":"环节名称",
"children":[
{
"id":31,
"itemCode":"111",
"approveName":"测试事项",
"apprStatusStr":"环节名称"
}
]
}
<script type="text/babel">
var vm = new Vue({
el: '#app',
data:{
apprItemData : [],
currentPage: 1, //当前页
totalRow: 0, //总页数
pageSize: 10 //当前显示条数
},
computed: {},
watch: {},
created() {},
mounted() {
this.loadItemData();
},
methods: {
// 加载事项信息
loadItemData () {
var pageSize = this.pageSize;
var currentPage = this.currentPage;
console.log("pageSize:"+pageSize+",currentPage:"+currentPage);
//debugger;
var geturl = '${root}/config/loadItemData.do?rows='+pageSize + '&page=' + currentPage;
$.ajax({
type: 'get',
url:geturl,
contentType: "application/json; charset=utf-8",
success: function(data) {
//debugger;
console.log("totalRow:"+data.total);
vm.apprItemData = data.rows;
},
error: function(e) {
console.log("更新数据出现错误:",e);
}
})
}
}
});
</script>
以上是关于ElementUI实现表格加载树形数据教程的主要内容,如果未能解决你的问题,请参考以下文章
ElementUI的表格树(树型结构表格),很简单方式,el-table只需要小小改动几个地方
ElementUI 表格使用树形数据 报错 for nested data item, row-key is required