element el-tree懒加载+搜索
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
思路
在el-tree 懒加载不兼容自带的查询,需要自己实现。
代码
<el-input clearable @keyup.native.enter="handelSearch" size="small" v-model="search"> </el-input>
<el-tree :data="treeDataShow" ref=“tree” node-key="id" lazy :load="loadNode" />
data() {
return {
search:'',//搜索参数
treeData:[],//总数据,由于要前端自己实现搜索,所以需要参数保存所有数据
treeDataShow :[],//当时不使用懒加载时,el-tree的显示数据
chooseNode: {},//当前选中节点
resolve:null,//保存load的resolve方法
}
},
mounted() {
this.$nextTick(() => {
//调用loadData方法展开第二层
let nodedata = this.chooseNode.childNodes[0]
nodedata.expanded = true
nodedata.loadData()
})
},
methods: {
loadNode(node, resolve) {
if(node.level===0){
this.chooseNode = node//保存初始节点
this.resolve =resolve//保存resolve方法
}
},
handelSearch(){
this.$refs.tree.$data.store.lazy = !this.search//根据搜索参数判断是否开启懒加载
if (this.search) {
//需要自己实现搜索方法 调用接口/前端js实现
//处理数据将对应的树形结构数据赋值给treeDataShow
} else {
this.treeDataShow = []//清空原来的treeDataShow数据
setTimeout(() => {
//注意使用异步,否则 this.treeDataShow = [],会将你留下一行代码懒加载的数据一起清空
this.loadNode(this.tree.chooseNode, this.tree.resolve)
}, 50)
}
}
}
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45
7 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 7 个月前
更多推荐
已为社区贡献3条内容
所有评论(0)