ElementUI
文章平均质量分 62
Hay-Zero
前端COPY师
展开
-
el-upload批量添加文件转换为base64格式上传,以及on-change钩子存在的坑和解决方法
<template> <el-upload class="upload-demo" action=" " //必选参数,上传的地址 :multiple="true" //是否支持多选文件 :limit="5" //最大允许上传个数 accept="image/png, image/jpeg" //接受上传的文件类型 :on-change="(file,fileList) =>.原创 2020-09-10 17:46:50 · 885 阅读 · 0 评论 -
骚操作解决option项过多组件卡顿,el-select filter-method和vue自定义指令实现假懒加载 && 假远程搜索
最近开发遇到个下拉列表会存在三四千个项甚至更多的情况,el-select组件会变得非常的卡,为了改善体验(这里的体验是指卡顿,不是请求慢),我所了解的有几种解决方法:使用远程搜索:我感觉缺点就是不搜索的话就没有项展示出来,不是所有人都能记住有什么项; 懒加载配合filter:类似分页获取,当项滚动到底部时page+1,获取下一页拼接到现有项的后面;缺点:filter过滤只能根绝已获取的项过滤,会造成误解,体验也不是很好;上述两种方法是基于我现有的认识,实现起来都需要后端的配合,如果有更好的方法,欢.原创 2020-09-07 18:05:48 · 1737 阅读 · 0 评论 -
el-tree当一个非叶子节点的直接后代节点都取消勾选后该节点继续保持勾选状态
<el-tabs type="border-card"> <el-tab-pane label="菜单权限"> <el-tree :data="menuGrantList" show-checkbox node-key="id" ref="treeMenu" chec...原创 2020-07-06 15:14:11 · 863 阅读 · 0 评论 -
el-tree实现单选功能
关键配置 :data 树形结构的数据show-checkbox 显示复选框ref 可以this.$refs.tree拿到此控件node-key 给节点的编号check-stricty 父、子节点之间没有关联【不写这个,选了父节点,会默认选择全部的子节点】check 复选框选择、取消选择时触发的事件<el-tree ref="tree" @check="handleCheck" :data="treeData" node-key="id"原创 2020-06-17 18:45:50 · 2891 阅读 · 0 评论 -
el-tree check-strictly为false实现选择和取消选择一个节点时,子节点跟着选中和取消
先看具体实现效果核心:绑定check事件和设置check-strictly为true,当点击某个节点时判断是勾选还是取消勾选;找到子节点和已勾选的节点,如果是勾选用concat合并再用set去重,如果是取消勾选在已勾选的节点中去掉子节点,最后用setCheckedKeys或者setCheckedNodes设置<el-tree :data="apiScopeGrantList" show-checkbox node-key="id" ref="treeApiScop原创 2020-06-15 18:30:25 · 6346 阅读 · 0 评论