思路

在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 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐