<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>elementui</title>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
<el-tree
show-checkbox
node-key="id"
ref="tree"
lazy
highlight-current
:props="defaultProps"
:load="loadTree">
</el-tree>
<button @click="getTree">获取树</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
defaultProps: {
children: 'children',
label: 'label',
isLeaf: 'isLeaf'
}
},
methods: {
//在懒加载的方法中会有node,resolve两个参数,也可以打印看一下
loadTree (node,resolve) {
if(node.level === 0) {
//这是树形控件的最外层
this.initTree(node,resolve); //将接口请求数据写成vue中的方法,并把两个参数一并传过去(node看需要,要用到就传,不用可不传)
}
if(node.level >= 1) {
this.getTreeItem(node,resolve); //获取子节点的方法,这里必须要传node,因为需要父节点的ID或者其他字段之类的来发起请求
}
},
initTree (node,resolve) {
//请求接口这里我就不写了,接口返回回来的应该是一个对象数据
var res = [
{
id: '566',
label: 'sdgsdg',
children: [],
isLeaf: false,
hasChildren: true
},
{
id: '57457',
label: 'sdgd',
children: [],
isLeaf: false,
hasChildren: true
},
{
id: '2222',
label: 'fhh',
children: [],
isLeaf: false,
hasChildren: false
}]; //假设为这样
//不管你要对上面的数组要做什么操作都要在resolve前
resolve(res); //渲染树节点方法
},
getTreeItem (node,resolve) {
//通过node可以拿到点击节点的所有信息
console.log(node);
var item = [
{
id: '3243',
label: '22',
children: [],
isLeaf: true,
hasChildren: true
},
{
id: '555',
label: '829',
children: [],
isLeaf: true,
hasChildren: true
},
{
id: '77',
label: '35325',
children: [],
isLeaf: true,
hasChildren: false
}]; //模拟数据
resolve(item);
},
getTree () {
}
}
})
</script>
</body>
</html>
elementui树形控件懒加载
最新推荐文章于 2024-07-08 15:42:31 发布