基于element-ui封装可搜索的懒加载tree组件的实现_vue.js

来源:脚本之家  责任编辑:小易  

 在项目中,我们需要运用到很多来自后端返回的数据。有时是上百条,有时甚至上千条。如果加上后端的多表查询或者数据量过大,这就导致在前端的显示就会及其慢,特别是在网络不好的时候更是如此。 自然,后端就做了一项非常“漂亮”的交互体验数据——分页 这不分页还好,一分页对超过10条数据之后的本来也不多,就20条,偏偏还得做个分页器。(假设为10条) 此时,如果能够像购物商城那样拖拽到底部自动加载新数据就好了。 于是《在element-ui的select下拉框加上滚动加载》诞生了。 这里通过自定义封装vue指令进行封装。(什么是指令:官方指令叫v-on,v-model) 以下以element-ui中的select为例:  在main.js同级别文件中添加directives.js: // directives.js import Vue from 'vue' Vue.directive('loadmore', { bind (el, binding) { // 获取element-ui定义好的scroll盒子 const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap') SELECTWRAP_DOM.addEventListener('scroll', function () { const CONDITION = this.scrollHeight - this.scrollTop <= this.clientHeight if (CONDITION) { binding.value() } }) } }) v-loadmore: 用于在element-ui的select下拉框加上滚动到底事件监听 scrollHeight 获取元素内容高度(只读) scrollTop 获取或者设置元素的偏移值,常用于, 计算滚动条的位置, 当一个元素的容器没有产生垂直方向的滚动条, 那它的scrollTop的值默认为0. clientHeight 读取元素的可见高度(只读) 如果元素滚动到底, 下面等式返回true, 没有则返回false scrollHeight - scrollTop === clientHeight 这里运用到了滚动偏移来做监听来处理,这与聊天对话框中默认下拉到底部的原理是大同小异的,后续我会有专门的文章进行讲解。 // main.js // 注册滚动条加载触发事件v-loadmore绑定 import directives from './directives' Vue.use(directives) 然后在组件中使用 <!-- vue --> <el-select v-model="chatmode" placeholder="聊天模式" size="mini" v-loadmore="loadMore"> <el-option v-for="item in chatmodes" :key="item.value" :label="item.qa_name" :value="item.qa_code" :disabled="item.disabled"> </el-option> </el-select> <script> export default { methods: { loadMore () { // 这里写入要触发的方法 } } } </script> 总结 以上所述是小编给大家介绍的在element-ui的select下拉框加上滚动加载,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持! 如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢! 您可能感兴趣的文章:elementUI select组件默认选中效果实现的方法www.zgxue.com防采集请勿采集本网。

引言

最近开发项目时遇到一个需求就是采用tree的方式展示以万为单位的数据,因为数据量大第一反应就是采用“懒加载”的方式实现,为了方便用户在庞大的数据量中快速定位到某个节点搜索功能也是必不可少的;因为采用“懒加载”数据,搜索当然也是远程搜索了;确定了需求当然第一时间就去网上找有没有小伙伴已经实现了相关组件,最后....,还是自己实现一个吧(由于公司采用的element-ui所以基于el-tree进行改造);【这只是自己实现的一种思路,希望大家多多指正】

提供几种可行的方案: 1.element-ui里面有文件上传的组件,已经开源。或者是你说的vue-file-upload; 2.自己写一个文件上传的组件,也是可以的,也不难的,封装一下请求,做一些事件

1.懒加载树的实现

所有的事件回调函数都有两个参数:event和ui,浏览器自有event对象,和经过封装的ui对象 option', 'connectWith', '.otherlist'); containment : Element, S

刚开始准备直接采用el-tree自带的懒加载方式,但在实现过程中发现el-tree采用懒加载后没有展开树节点,这显然行不通;思来想去懒加载不就是展开节点时再去加载数据吗,我采用非lazy的形式自己控制就行了啊,于是有了下面的实现:

) return; } //this.element也就是调用此widget的元素 var e = this.element; //ui-widget wi ui- corner-all 圆角(基于css3,ie下不起作用) this.element.addClass("ui-widget ui-st

// 数据格式要求const treeData = [ { label: '节点1', id: '1', children: [] // 为了显示展开的小箭头凡是有子节点就需要带上 }, { label: '节点2', id: '2' }]

; <span v-else>未知控件类型</span> </el-form-item> 考虑到每种表单控件的处理逻辑千差万别,楼主采用了第二种方式。 根据这个思路,我们来封装一个 dyna

在拿到上面的数据后我会对数据进行一些处理来实现展开时加载子节点数据,具体如下:

</draggable>包裹拖动项的父级元素,但是element组件库对table进行封装,无法直接 element-ui 表格实现单元格可编辑的示例详解vue2.0的Element UI的表格table列时间戳格

// 执行后数据变成下面的形式const treeData = [ { label: '节点1', id: '1', children: [ // 渲染节点时通过_state_来标识显示加载状态,如果网络中断加载失败 //_state_ = 1,可点击重新加载再次索要数据,不用关闭节点再展开去加载 // 之所以都加载id,是为了给el-tree添加node-key,方便树的操作使用,具体见elementUI文档 {id: '1-test', '_state_': 0} ] // 为了显示展开的小箭头凡是有子节点就需要带上 }, { label: '节点2', id: '2' }]

Promise的axios请求封装详解Vue ElementUi同时校验多个表单(巧用new promise)vue- is not defined问题基于vue-resource jsonp跨域问题的解决方法Vue2.0 vue-source jsonp

数据插入

是自己封装的方法么?相关于元素定位? 调用的话,利用初始化成功的driver, driver.findElementByAndroidUIAutomator("new UiSelector().text(\\"WebviewTest\\")&q

在展开节点时获取数据,然后获取到展开点插入便是,el-tree提供了对应方法;

if (needLoadingRequestCount === 0) { endLoading() } } startLoading()和endLoading()就是调用 element 的 loading 方法。 import { Loading } from 'element-ui' let loading function

到这里懒加载树基本上就做好了

本次封装的组件以toast组件为例 以前使用移动端ui插件时,通过一句代码比如 $.toast( ‘ 需要显示的内容 ' ),从而在页面上展示这段文字,并在一定时间后消失。 现在我们也尝试自

2.远程搜索实现

每次和后台交互的时候,经常用到的就是axios请求数据,它是基于promise的http库,可运行 import axios from 'axios' import { Loading, Message } from 'element-ui' import router fro

远程搜索框主要采用了el-select的远程搜索功能,这里就不赘述了,主要介绍更具搜索选中的id获取的数据的和插入树节点方式:

查询回显input的封 最近有幸在做一个管理系统采用的是vue+element-ui, 表单页面非常多 在vue中, 子组件是不能修改父组件的, 在框架封装中大部分是作者自己封装了dispatch 和

要求数据格式

es8的async await让异步变成了同步的写法,在vue中,可以通过封装axios,使得所有的请求 那该如何用呢, 下面以vue项目为例简述: 有些ui库,比如element ui这种,已经将toast这种

const nodeData = { label: '节点1', // 最上层节点 id: '1', children: [ {label: '节点1-1', id: '1-1', chilrend: []}, {label: '节点1-2', id: '1-2', chilrend:[]} // 搜索对应id的节点 ]}

: function(){ //关闭日期框时手动触发change事件 element.change(); } }); }); element.click( 否则在Controller中设置的初始值会变成NaN。 11.不足之处 原插件是有很多可选项的,我

返回的数据就是你要获取的节点id的兄弟节点及父节点的所有兄弟节点依次类推,直到这个节点分支的的根节点;听起来有点绕,但是你可以脑补一下你展开这个节点后所有面上的节点你都是要有的;

将数据插入树中

这段代首先会将数据和本地数据进行对比合并(刚开始设计时没有合并,采用直接替换的方式,因为需要基于这个树实现下拉选择组件【如果对下拉树组件感兴趣可以留言,我给大家分享下我的思路,相对而言比这个组件的封装复杂度要高一些】,并支持多选有默认值设置问题,才改为合并处理的方式;对比合并并不需要太多时间执行,因为新数据只会有一个节点与本地数据不同,所以还是很快的),然后找到本地需要插入数据的节点,执行插入即可;

3.效果图展示

结语

这只是我个人对业务的一种解决方式,存在的不足还希望大家多指正;同时也希望得到大家的鼓励,让我在前端的道路上继续努力进步:grinning:。

参考链接

Vue

element-ui

到此这篇关于基于element-ui封装可搜索的懒加载tree组件的实现的文章就介绍到这了,更多相关element 可搜索懒加载tree内容请搜索真格学网以前的文章或继续浏览下面的相关文章希望大家以后多多支持真格学网!

原因 今天在使用element-ui时,el-input组件监听不了回车事件,如下代码没有想要的效果: <el-input class="search-input" placeholder="请输入内容" v-model="searchText" @keyup.enter="search()"></el-input> 原因应该是element-ui自身封装了一层input标签之后影响了事件的监听,在element-ui里有很多因为自身封装了几层标签导致事件和样式无法按想要的效果呈现,遇到后可以在网页中查看dom结构分析原因。 解决 在事件后面加上.native: <el-input class="search-input" placeholder="请输入内容" v-model="searchText" @keyup.enter.native="search()"></el-input> 总结 以上所述是小编给大家介绍的vue使用element-ui的el-input监听不了回车事件的解决方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持! 您可能感兴趣的文章:Vue ElementUI之Form表单验证遇到的问题Spring boot + mybatis + Vue.js + ElementUI 实现数据的增删改查实例代码(二)Vue2.0 UI框架ElementUI使用方法详解使用vue.js2.0 + ElementUI开发后台管理系统详细教程(一)使用vue.js2.0 + ElementUI开发后台管理系统详细教程(二)vue2.0结合Element实现select动态控制input禁用实例内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • 详解如何实现element树形控件tree在懒加载模式下的动态更新
  • 浅谈vue引用静态资源需要注意的事项
  • vue.js 父子组件通信的十种方式
  • vue router路由嵌套不显示问题的解决方法
  • vue中使用微信公众号js-sdk踩坑记录
  • 对vue beforerouteenter 的next执行时机详解
  • vue实现前台列表数据过滤搜索、分页效果
  • vue .js绑定checkbox并获取、改变选中状态的实例
  • 动态axios的配置步骤详解
  • 详解vue-property-decorator使用手册
  • vue2.0使用v-for循环制作多级嵌套菜单栏
  • vue使用element-ui的el-input监听不了回车事件的解决方法
  • 在element-ui的select下拉框加上滚动加载
  • Vue ElementUi同时校验多个表单(巧用new promise)
  • nt-ui组件中input等的change事件中传递自定义参数
  • vue里的elementui日期控件怎么将明天改成左上角有标记
  • element ui table排序sortable三种状态,怎么去掉默认状态
  • 基于jQuery UI CSS Framework开发Widget的经验
  • Vue+ElementUI实现表单动态渲染、可视化配置的方法
  • sortable+element 实现表格行拖拽的方法示例
  • vue中利用Promise封装jsonp并调取数据
  • appium 调用uiautomator的方法
  • 用Axios Element实现全局的请求loading的方法
  • 在vue中封装可复用的组件方法
  • vue axios封装及API统一管理的方法
  • 如何根据业务封装自己的功能组件
  • 使用async await 封装 axios的方法
  • Angular指令封装jQuery日期时间插件datetimepicker实现双向绑...
  • jquery sortable的拖动方法示例详解
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全yui.ext相关prototypejqueryangularjsjsonlib_jsjs面向对象extjsmootoolsseajsdojovue.jsbackbone.js其它首页javascriptjavascript类库详解如何实现element树形控件tree在懒加载模式下的动态更新浅谈vue引用静态资源需要注意的事项vue.js 父子组件通信的十种方式vue router路由嵌套不显示问题的解决方法vue中使用微信公众号js-sdk踩坑记录对vue beforerouteenter 的next执行时机详解vue实现前台列表数据过滤搜索、分页效果vue .js绑定checkbox并获取、改变选中状态的实例动态axios的配置步骤详解详解vue-property-decorator使用手册vue2.0使用v-for循环制作多级嵌套菜单栏vue引用js文件的多种方式(推荐)简单理解vue中props属性vue之父子组件间通信实例讲解(prvue props用法详解(小结)vue元素的隐藏和显示(v-show指令vue.js常用指令汇总(v-if、v-fovue 进阶教程之v-model详解使用vue实现图片上传的三种方式vue.js实战之利用vue-router实现vue.js中的图片引用路径的方式vue2.x 对象劫持的原理实现解决vue使用swiper动态加载数据,动态轮播vue获取当前激活路由的方法轻松理解vue的双向数据绑定问题vue keep-alive 动态删除组件缓存的例子vue中的v-for循环key属性注意事项小结vue scrollbehavior 滚动行为实现后退页面详解如何在vue项目中使用eslint+prettiervue概念及常见命令介绍(1)解决element ui select下拉框不回显数据问
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved