思路

在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 = truenodedata.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)}}}

element el-tree懒加载+搜索相关推荐

element ui 树形-懒加载-表格-多选勾选问题
element ui树形表格如下: 它的数据格式为:使用children字段来存放子级数据 tableData: [{id: 1,date: "2016-05-02",name: ...
matlab uitree update,elementUI tree 懒加载更新节点
最近在项目中用到了 elementUI 的懒加载 tree 组件,因为项目里有新增.修改.删除节点的功能,使用了以后发现不能主动更新 tree 的数据,查阅资料,发现找不到解决的方案,最后尝试了 N ...
element中树形数据与懒加载实现全部展开和全部收起
element中属性懒加载数据 default-expand-all属性::是否默认展开所有行,当 Table 包含展开行存在或者为树形表格时有效如果在表格头上加上一个按钮实现全部展开与收起类似如 ...
element tree ui 全选_element-ui Tree之懒加载叶子节点设置半选效果
本来是不太想动的... 无可奈何,看到一句话[业精于勤, 荒于嬉]便还是动手写一写加深理解的同时给以后的自己留个备份吧... element-ui Tree组件如何给具有懒加载的tree设置半选效果? ...
vue+element实现树状表格的增删改查；使用el-table树形数据与懒加载实现树状表格增删改查
以下代码可以直接复制使用一.情景: 列表是一个树状表格,可以无限添加下级,以及对列表的某一行进行增删改查(目前查没有写). 原博链接二.本篇是在原博主的代码基础上添加了部分功能. 功能1: 给树状 ...
el-select下拉框懒加载以及搜索联合处理+搜索防抖处理
前言本文采主要用了自定义指令结合绑定滚动条事件的方式问题描述现有一个页面,充斥着大量表单元素,首先要知道的是vue对于视图上的更新机制,在一个组件内若有元素发生变动,那么整个组件就会刷新渲染,所 ...
element ui 图片加载失败_element图片懒加载的问题
本来我这个人就很懒的,并不喜欢写说明博客之类,浪费时间浪费精力,学习的过程,遇到一些很小白的问题,百度搜索解决,然后在代码里注释下而已, 突然想到世界上是存在大多数像我这样的小白的,滴水之恩当涌泉相报 ...
LayUi 树形组件tree 实现懒加载模式，展开父节点时异步加载子节点数据
LayUi框架中树形组件tree官方还在持续完善中,目前最新版本为v2.5.5 官方树形组件目前还不支持懒加载方式,我自己修改了下最新源码tree.js,简单粗暴的方式支持懒加载模式.(Ps:最新更新 ...
懒加载、瀑布流和LightBox实现图片搜索效果
开始做一个小项目,算是对js和jQuery的一次练习吧. 图片资源来自这个网站(上面有很多高清图片关键还是免费下载的): https://unsplash.com/ 项目具体效果可以点这里: htt ...

element el-tree懒加载+搜索

思路

代码

element el-tree懒加载+搜索相关推荐

最新文章

热门文章