先放核心代码
<el-table :data="dataList"
style="width: 100%;margin-bottom: 20px;"
row-key="id"
border
lazy
:load="load"
:tree-props="{children: 'children', hasChildren: 'hasChildren'}"
>
<el-table-column prop="name" label="菜单名称" align="center"></el-table-column>
<el-table-column prop="linkUrl" label="访问路径" align="center"></el-table-column>
<el-button type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>
<el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
- script部分
var vue = new Vue({
el: '#app',
data() {
return {
dataList: [],//当前页要展示的分页列表数据
}
}
},
//钩子函数,VUE对象初始化完成后自动执行
created() {
this.findPage();
},
methods: {
//分页查询
findPage() {
// this.pagination.queryString = null;
var parm = null;
if (this.pagination.queryString == null) {
parm = {
currentPage: this.pagination.currentPage,
pageSize:this.pagination.pageSize,
queryString: null
}
} else {
this.pagination.currentPage = 1;
parm = {
currentPage: this.pagination.currentPage,
pageSize: this.pagination.pageSize,
queryString: this.pagination.queryString
}
}
axios.post("/menu/findMenuPage.do", parm).then((res)=>{
//this.menuList = res.data.data;
//为模型数据赋值,基VUE的双向绑定展示到页面
this.dataList = res.data.rows;
this.row= res.data.rows.id
this.pagination.total = res.data.total;
this.pagination.queryString = null;
})
},
//tree包含点击的节点数据,里面包含key值为children,含有子节点的数据,通过resolve回显到前端
load(tree, treeNode, resolve) {
console.log(tree)
setTimeout(() => {
resolve(tree.children)
}, 1000)
},
}
})
这里的tree是重点, 要懒加载需要获取点击的节点的子节点,后台传输数据的父节点(只有一级节点)children里包含子节点内容。
通过console.log(tree)可以发现它的结构
{…}
children: Array(3)
0: {…}
1: {…}
2: {…}
length: 3
__ob__: Observer {value: Array(3), dep: Dep, vmCount: 0}
__proto__: Array
description: (...)
hasChildren: (...)
icon: (...)
id: (...)
level: (...)
linkUrl: (...)
name: (...)
parentMenuId: (...)
path: (...)
priority: (...)
roles: (...)