代码实现
<el-tree :data="treeData" :props="defaultProps" :load="loadNode" lazy highlight-current node-key="value" ref="tree" accordion auto-expand-parent :current-node-key="currentNodeKey" :default-expanded-keys="defaultExpanded" :filter-node-method="filterNode">
</el-tree>
data () {
return {
timeout: null,
treeData: [],
defaultProps: {
children: 'children',
label: 'label',
isLeaf: 'isLeaf' // 设置下钻箭头
},
currentNodeKey: '', // 当前选中节点的key -> string
defaultExpanded: [], // 默认展开的节点的key的数组
filterText: ''
}
}
方法实现
loadNode (node, resolve) {
// this.treeshow1 = false
if (node.level === 0) {
return false
}
let arr = []
Api.getfindGroupTree(node.data.value)
.then(data => {
if (data.status === 0) {
let body = data.data
// console.log(body)
if (body instanceof Array) {
if (body.length !== 0) {
body.forEach(item => {
arr.push({
value: item.value,
label: item.label,
isLeaf: item.leaf
})
})
} else {
arr = []
resolve([])
return
}
} else {
arr = []
}
let childData = arr
setTimeout(() => {
resolve(childData)
}, 300)
} else {
this.$message({
type: 'warning',
message: '获取数据失败'
})
}
})
.catch(res => {
this.$message({
type: 'error',
message: '获取数据失败'
})
})
},
querySearchAsync (queryString, cb) {
if (queryString === '') {
let air = []
cb(air)
// this.getfindGroupTree(this.BtnArr[0], 0)
} else {
clearTimeout(this.timeout)
this.timeout = setTimeout(() => {
Api.getfindByKeyWord(queryString)
.then(data => {
let datas = data.data
if (data.status === 0) {
if (datas !== []) {
var restaurants = datas
var arr = []
restaurants.forEach((item, index) => {
arr.push({
id: item.value,
value: item.label,
parentid: item.parentid
})
})
cb(arr)
} else {
let air = []
cb(air)
}
} else {
this.$message({
type: 'warning',
message: '获取数据失败'
})
}
})
.catch(res => {
this.$message({
type: 'error',
message: '获取数据失败'
})
})
}, 500)
}
},
handleSearchSelect (item) {
// 下拉框选择,回调函数
this.filterText = item.value
this.filterSearch(item.id, item.parentid)
},
filterSearch (id, parentid) {
Api.getdealWithSearch(id, parentid)
.then(data => {
if (data.status === 0) {
let datas = data.data
let defaultExpanded = []
for (let i = 0; i < datas.length; i++) {
defaultExpanded.push(datas[i]) // 返回被搜索节点数组以及其父节点的数组
}
this.defaultExpanded = defaultExpanded
let time = datas.length - 1
setTimeout(() => {
this.$refs.tree.setCurrentKey(datas[datas.length - 1])
}, time * 400) // 时间要比懒加载时间长,否则无法高亮显示选中节点
} else {
this.$message({
type: 'warning',
message: '获取数据失败'
})
}
})
.catch(res => {
this.$message({
type: 'error',
message: '获取数据失败'
})
})
}