vue ElementUi Tree效果展开、收起、查询

<el-row><el-col :span="14"><el-form @submit.native.prevent><el-input size="medium" v-model.trim="aside.search.address" clearable placeholder="请输入设备位置" @keyup.enter.native="asideSearch"></el-input></el-form></el-col><el-col :span="10"><el-button type="primary" size="medium" @click="asideSearch" style="margin-left:40px" >查 询</el-button></el-col>
</el-row>
<div class="aside-tree-auto"><el-treeref="asideTree"     //锚点v-loading="aside.loading"  //动态数据加载效果:data="aside.treeData"    //tree数据:props="aside.defaultProps"     //:highlight-current="aside.highlight"  //是否高亮当前选中节点，默认值是 false@node-click="handleNodeClick"  //点击tree节点  [展开与闭合都触发]:default-expand-all="aside.circleOrRemove"   //展开闭合:filter-node-method="filtertreeNode" //模糊查询element-loading-background="rgba(255,255,255,1)"   //loading背景颜色><!--备注:    @node-click=""  //点击树节点  节点打开闭合都触发@node-expand=""  //点击树节点  节点展开时触发  所以如果点击树节点后有业务建议上述该方法改为 node-expand  --><!--此处代码实现的作用是针对于tree子项显示不同的icon图标，根据其点击每条数据的内部字段是来判断--><span class="custom-tree-node" slot-scope="{node,data}"><span v-if="data.imei" :class="(videoContainer.arrAll.filter(v=>v == data.id)).length>0?'disabledTree':''"><i class="el-icon-s-promotion" style="color:#fc0000;margin-right:5px;font-size:20px"></i>{{data.label}}</span><span v-else><i class="el-icon-s-data" style="color:#4683c4;margin-right:5px;font-size:15px"></i>{{ data.label }}</span> </span></el-tree>
</div>data(){return{aside:{loading:false,highlight:true,circleOrRemove:true,defaultProps: {children: 'children',label: 'label'},search:{address:'',}}}
}//方法：
methods: {//tree点击的当前数据handleNodeClick(row){};//tree全部展开asideCircle(){if(_this.aside.circleOrRemove) return_this.aside.circleOrRemove = !_this.aside.circleOrRemove;_this.expandNodes(_this.$refs.asideTree.store.root)},//tree全部收起asideRemove(){if(!_this.aside.circleOrRemove) return_this.aside.circleOrRemove = !_this.aside.circleOrRemove;_this.expandNodes(_this.$refs.asideTree.store.root)},//遍历属性数据，设置每一项的expanded属性，实现展开收起expandNodes(node){node.expanded = _this.aside.circleOrRemove;for(let i = 0; i<node.childNodes.length; i++){node.childNodes[i].expanded = _this.aside.circleOrRemove;if(node.childNodes[i].childNodes.length > 0){_this.expandNodes(node.childNodes[i]);}}},//aside 查询asideSearch(){//如果检索内容为空停止if(!_this.aside.search.address) return;//去除检索条件中输入的空格_this.$refs.asideTree.filter((_this.aside.search.address).replace(/\s+/g,''))},//tree 检索filtertreeNode(value,data,node){if(!value) return true;return _this.findSearKey(node,value);},findSearKey(node,key){if (node.label.indexOf(key) !== -1) {return true;} else {if (node.parent.parent == null) {return false;} else {return this.findSearKey(node.parent, key);}}},}

效果图如下：

vue ElementUi Tree效果展开、收起、查询相关推荐

vue列表的单独展开收起和全部展开收起
效果如下列表的展开收起 html代码 <div class="content1" v-for="(item, index) in list" :key= ...
Vue 实现在文本溢出后浮现Tooltip、及文本展开收起效果
目录示例: 1. expandable模式(默认) - 文本展开收起效果: 2. tooltip模式 - 文本使用Tooltip效果: 3. tooltipExpandable模式 - 文本同时使用 ...
html树 node节点定位,【Vue】element-ui Tree如何定位到一个节点，并高亮显示该节点？...
我要实现的效果是:搜索关键字,得到搜索结果点击搜索结果,展开节点,并定位到该结果的位置(高亮显示) 目前只实现了展开节点的效果定位到该结果的位置和高亮显示这两点无法实现定位到该结果的位置:目前只 ...
基于vue渐变展开收起盒子动画（盒子高度不定）
基于vue展开收起盒子动画(盒子高度不定) 问题: transition动画只能对高度给定的盒子,在高度变化时实现展开收起动画.对于不定高度的盒子,transition无能为力解决方案: 小白入门, ...
echarts tree默认展开_echarts tree控制节点的展开收起
echarts使用版本 v4版本需求当数据量比较大时,tree的子节点会挤在一起,这不是产品想要的效果产品期望点击某一子节点时,其他同级节点自动收起,效果如下 echarts官方文档并没有提供类 ...
vue控制多行文字展开收起
这里讲一下,如何使用vue控制多行文字展开收起(也叫控制文字展开隐藏). 效果: 这里设置了控制三行,如果超过三行会展示,"显示更多" 超出文字显示省略号. 点击"显示更 ...
vue中多行文本标签_vue控制多行文字展开收起的实现示例
这里讲一下,如何使用vue控制多行文字展开收起(也叫控制文字展开隐藏). 效果: 这里设置了控制三行,如果超过三行会展示,"显示更多" 超出文字显示省略号.点击"显示更多 ...
vue中实现文字超过2行... 展开-收起(兼容ie)
先看看实际效果 2.需求一步一步分析当文字超出省略号就想到css样式实现(ie不兼容) overflow: hidden; text-overflow: ellipsis;display: -we ...
Vue.js实现文字超出指定高度后展开收起功能
参考网站效果爱企查:https://aiqicha.baidu.com/company_detail_28783255028393 天眼查:https://www.tianyancha.com/co ...

vue ElementUi Tree效果展开、收起、查询

vue ElementUi Tree效果展开、收起、查询相关推荐

最新文章

热门文章

vue ElementUi Tree效果 展开、收起、查询

vue ElementUi Tree效果 展开、收起、查询相关推荐

最新文章

热门文章

vue ElementUi Tree效果展开、收起、查询

vue ElementUi Tree效果展开、收起、查询相关推荐