element tree点击动态请求数据
用element 做树结构的时候发现如果要一次性加载所有数据 会很卡,所以就想点击一级菜单加载,我们的最多只有二级,所以我判断是只有二级。如果需要子节点,一定要让后端传children哦
template
<el-tree node-key="id" :data="dataList" icon-class="el-icon-arrow-right" lazy :props="defaultProps" @node-click="handleNodeClick"></el-tree>
加lazy是为了让树图有个箭头的标志
js
data() {
return {
dataList: [],
defaultProps: {
children: 'children',
label: 'label',
isLeaf: 'leaf'
},
}}
点击加载的方法,里面我这个项目比较大,所以只有截取相关的部分
handleNodeClick(data) {
console.log(data)
//判断有children并且children为空
if (data.children && data.children.length === 0) {
//这里是我做了一个转圈的loading动画,不需要可以去掉
const loadingInstance = Loading.service({
target: '#dashboard-container',
fullscreen: 'true',
background: 'rgba(255, 255, 255, 0.3)'
})
//后端 所需要的数据
sqlfield({ data: { platform_tag: this.searchData.platform_tag, type: this.searchData.type, table: data.label }}).then(
response => {
data.children = response.data
//因为我们只有二级,所以我已经让第二级不用去请求,直接去掉那个三角icon
data.children.forEach(function(value, i) {
value.leaf = true
})
loadingInstance.close()
})
.catch(() => {
loadingInstance.close()
})
// this.treeData[data.$treeNodeId - 1].children = treeData1
// data.children = this.treeData1[0].children
}
},
这里后端给我的数据是
{"code":200,"msg":"成功","data":[{"label":"log_ym | bigint | ????"},{"label":"ip | varchar | ip"},{"label":"province | varchar | ??"},{"label":"city_name | varchar | ??"}]}
这只是点击加载的判断,,
下面是一开始进来请求的判断
chnageTable() {
const loadingInstance = Loading.service({
target: '#dashboard-container',
fullscreen: 'true',
background: 'rgba(255, 255, 255, 0.3)'
})
sqltable({ data: { platform_tag: this.searchData.platform_tag, type: this.searchData.type }}).then(
response => {
this.dataList = response.data
loadingInstance.close()
})
.catch(() => {
loadingInstance.close()
})
},
这个时候后端给的数据是这样的
{"code":200,"msg":"成功","data":[{"label":"mtj_activation","children":[]},{"label":"mtj_zuanshi_gain","children":[]},{"label":"mtj_zuanshi_use","children":[]},{"label":"test","children":[]}]}