el-select

element的el-select给下拉框添加背景以及鼠标离开背景色不消失问题

1,给下拉框添加背景色//下拉框内容背景色.el-select-dropdown__item.selected,.el-select-dropdown__item:hover,.el-select-dropdown__item.hover{color:#fff;background:#409EFF;}效果图:ok,有效果了.2,解决添加背景鼠标移出去背景不消失问题,当我鼠标移出下拉框的时候,看效果
曾经的你d·2022-09-02 17:12

el-select 下拉框自定义背景颜色

需求：根据后端返回的颜色值，渲染不同的背景颜色实现效果：'+item.sourceName+''">
蓝胖子的多啦A梦·2022-09-02 17:22

el-select选择器组件封装 下拉菜单 elementui

前言我们都知道elementui的选择器组件（下拉菜单)局限性很多，比如说选项不能展示更多行内容，数据量太大的话卡顿（因为没有分页）等等。博主这里分享一个自己封装的组件，解决了这些所有问题，可展示多行内容，单选或多选，分页，禁用，输入搜索，在使用时更加的灵活。组件使用的截图会员选择器支持搜索和分页代码部分{{item.memberName}}{{item.mobile}}专属老师：{{item.t
清风无影_·2022-08-27 22:27

el-select 的focus事件和ElMessageBox搭配出现的focus死循环问题的解决方法

问题因为业务需要，所以出现了不停弹出ElMessageBox的这种情况，代码如下：import...exportdefaultdefineComponent({setup(){constform=ref({})constoptions=ref([])constonFocus=()=>{if(!form.value.cate){ElMessageBox.alert('请先选择分类','提示',{co
·2022-08-27 19:28

vue如何实现el-select下拉选项的懒加载

目录滚动加载的核心逻辑在vue中处理数据懒加载在vue组件中使用指令v-lazy-loadElement指令v-infinite-scroll下拉选择是常用的用户交互选择的操作；常用固定选择项或者动态渲染选择项。实际项目中存在数据量大，一次性渲染很多数据会造成下拉卡顿的问题，通过滚动懒加载，逐步增加下拉选项。滚动加载的核心逻辑通过监听容器的滚动事件，滚到最底部时，执行加载数据函数。interfac
·2022-08-18 12:04

vue el-select与el-tree实现支持可搜索树型

目录1.树型下拉菜单2.vue页面代码3.selectTree组件代码1.树型下拉菜单实现效果2.vue页面代码引入selectTree组件import{selectTree}from'@/components'exportdefault{components:{selectTree},data(){defaultData:{managementStationId:'147857018665360
·2022-08-18 12:32

vue el-table中使用el-select选中后无效的解决

目录el-table使用el-select选中后无效el-table中selectable的使用el-table使用el-select选中后无效需求：表格中一行显示一条数据，数据中的某个属性要展示一列，
·2022-08-09 15:42

【爆肝推荐】手摸手带你做Springboot + mybatis plus + shiro + redis 后台管理项目（第三章）整合shiro 设置用户密码加密

在登陆的时候加入一些校验和拦截，顺便把信息设置做出来，上篇篇幅太长就没把info.html写出来，上篇中有部分使用ElementUI，下拉是select，之前使用Layui,但是展示有问题，无奈采用Element的el-select
无术同学·2022-08-04 07:25

vue element-ui el-select 级联

需求介绍image.pngdata(){return{operateIdList:[],operateTypeIdList:[]}},methods:{operationTypeChange(val){console.log(val)for(leti=0,len=this.operateTypeIdList.length;i
正经摸鱼·2022-07-27 15:08

vue+element开发使用el-select不能回显的处理方案

目录使用el-select不能回显的处理el-select编辑数据不回显问题使用el-select不能回显的处理下拉框选择的时候，选不上下拉框的值，element提供了@change事件使用vm.
·2022-07-27 09:52

Vue动态数据实现 el-select 多级联动、数据回显方式

目录动态数据el-select多级联动、数据回显多级联动select菜单（易懂）动态数据el-select多级联动、数据回显父组件importProviderCategoryfrom'.
·2022-07-26 09:27

element-ui 远程搜索组件el-select在项目中代码实现

element-ui远程搜索组件el-select在项目中代码实现一、功能展示1、当没有搜索条件时搜索显示全部2、当有搜搜条件时模糊查询符合的数据二、代码实现1、先引入select组件的代码(页面代码)
·~简单就好·2022-07-24 11:55

【vue-treeselect+vxe-table】数据量大的时候懒加载，数据回显，输入框绑值，末级节点不要前面的箭头等问题详解

el-table可编辑表格，有一列是treeselect下拉树，接口数据900多kb，请求花了400毫秒左右，按道理说数据不算很大，但是渲染很慢，一刷新或者刚进页面，有1.89秒的卡顿，并且点击下拉树或者同行其他的el-select
花眼熊·2022-07-19 09:21

el-select,el-option下拉选择框

一.下拉选择框的使用exportdefault{data(){return{options:[{value:'选项1',label:'黄金糕'},{value:'选项2',label:'双皮奶'},{value:'选项3',label:'蚵仔煎'},{value:'选项4',label:'龙须面'},{value:'选项5',label:'北京烤鸭'}],value:''}}}分析代码:在el-s
这次我一定要赢·2022-07-07 09:12

el-select数据量过大引发卡顿，怎么办？

本文分享自华为云社区《解决el-select数据量过大的卡顿的两种思路与一种实施方案》，作者：KevinQ。经典问题：在测试环境好好的，怎么到正式环境就不行了？——本文：数据量变了。
华为云开发者联盟·2022-06-16 11:00

vue中el-autocomplete与el-select的异同

目录前言异同el-autocompleteel-select总结前言最近项目里面需要使用到下拉框的远程搜索，我这边使用的是el-select，其实查看文档我们可以得知，还可以使用el-autocomplete
·2022-05-29 12:46

element-plus 下拉框实现全选的示例代码

下拉框的简单使用使用方法还是比较简单的首先需要使用到el-select和el-option，el-select就是下拉框，所以需要使用v-model双向绑定数据。而el-option就是下拉框的选项。
·2022-05-25 18:10

使用控制台$0让禁用的表单项和按钮能修改点击

有时候为了省事情，我们直接给表单的el-input或者el-radio或者el-select以及的el-button等加上一个disabled禁用属性，这样的话，就不能编辑操作，不能点击保存了。
·2022-05-24 11:06

el-table 自定义表头无法重新渲染

1.无法展示自定义头部问题el-table自定义表头无法重新渲染，通过el-select选择修改数据后，数据更改了，但是页面没有更新，使用this.set()都无法渲染页面，element官网上el-table
晴天守候·2022-04-08 16:37

vue如何监听el-select选择值的变化

目录监听el-select选择值的变化方法很简单@change就可以实现@change绑定了currStationChangeel-select将选中的值传递到需要的位置方法一方法二监听el-select
·2022-04-08 11:42

记录使用的elementui问题/兼容适配的ui问题

1、取消el-select的选中状态的黄框2、移动端点击时元素产生的背景色-webkit-tap-highlight-color:transparent;https://www.jb51.net/css
·2022-03-31 14:15

Element中Select选择器的实现

本篇是关于下拉框相关知识点总结今天来整理一下目前最喜欢的el组件el-select:Element官网最近真的做梦都是这个组件的相关属性clearable和filterable和对应的钩子函数@change
·2022-03-24 10:28

2020-08-28 2020让你的ElementUI el-select 失去焦点 el-select+el-tree下拉组件让选择更多 下拉树

操让我们更加有经验，这里做了一个elementUIeleselect+tree的下拉组件功能实现完成，但是有点不完美，选中后无法关闭下拉框这个是重点加了一行代码this.$refs.selectblur.blur();image.png页面引用importSelectTreefrom"./components/treeSelect";exportdefault{components:{Select
半眼鱼·2022-02-20 02:03

element Select选择器 通过js自动展开下拉框

今天做项目的时候遇到一个问题：怎么通过js而不是鼠标直接点击，来让el-select的option下拉框展开。查阅官方文档后，发现有个focus方法能够获取input的焦点：于是写上代码this.
Xyaleo·2022-02-18 19:18

el-select 设置默认值后选项无法切换

问题：设置默认选项后，进行选项切换无反应，如下图：默认值为南京市，选择其他市时选项框依然显示为南京市。原因：出现这个问题就是绑定了对象（需求如此），render函数没有自动更新，数据刷新了，但是视图没有刷新。解决方案：this.$forceUpdate就是重新render。
书山有路_勤为径·2022-02-17 15:50

浅谈ElementUI el-select 数据过多解决办法

目录1.场景描述2.解决办法el-select组件的options条数过多时的解决方案业务场景解决思路注意事项1.场景描述不知道你有没有这样的经历，下拉框的选项很多，上万个选项甚至更多，这个时候如果全部把数据放到下拉框中渲染出来
·2022-02-17 11:21

element修改form的el-input宽度,el-select宽度的方法实现

自从用了element-ui,确实好用，该有的组件都有，但是组件间的样式都固定好了，有时候像form表单这样，页面的input、select等宽度不一定会是一样的，可能有些长，有些短，这时候改变这些控件的宽度就有点麻烦了。看了网上的好多文章，都没有找到解决方案，很多都说在el-input里面加width,但是效果不好，简单总结一下这个例如我想要这种效果，把描述和邮箱都的宽度width设置长一点首先
·2022-02-17 11:19

elementUI系列01：el-select 默认值显示value不显示label

一、问题描述：用elementUI做下拉框时，需要设置默认值，但是显示的确不是label二、问题原因：仔细看一下，是粗心导致，el-option中value值类型是String的1，而绑定的stateLevel赋值是Number的1三、处理方案：将stateLevel的赋值更改为String类型的1即可
Clare_l·2022-02-15 12:37

vue+elementUI中el-select使用change事件传值的问题

change事件中，会获取到当前选中的值（因为默认会将event参数传递过去）如果你想要传递多个值，change（$event，“传递的其他值”），将“选中的当前元素“和”传递的其他值”一起传递过去。
瑞破破·2022-02-13 18:45

element下拉树封装el-select el-tree

image1.组件调用代码{{`基于Element-UI组件改造的树形选择器`}}:ID为：{{valueId}}调用组件的数据importSelectTreefrom"./components/treeSelect.vue";exportdefault{name:"app",components:{SelectTree},data(){return{isClearable:true,//可清空（
_孙小胖·2022-02-13 12:46

vue element组件el-input标签和el-select(多选框)宽度不一样

问题描述:在用vue时，用到了element组件的el-input和el-select（多选框）组件,但是宽度显示不一样,查看了多选框的css,发现element-style是写死的页面的代码如下:后来通过实验找到一个很简单的方法
月中眠_d56d·2022-02-11 01:03

Vue+element UI select组件回显数据问题

elementUI的el-select中v-model的值要跟遍历出来的option的值的类型要保持一致才可以回显成功
MyIreland·2022-02-03 14:02

带allow-create的el-select限制长度

需求：给el-select添加新增字段长度限制且新增内容不能为空1、首先给el-select绑定一个id（例如：selectSku），这个id会传到组件里面，绑定在那个input上面，2、然后通过document.querySelector
落叶雪无言·2021-11-22 14:00

解决element-ui的el-select组件文字超过宽度时不出现横向滚动条问题

1.出现横向滚动条给select加个下拉框的类名popper-class="new-select"思路：设置下拉菜单的最大宽度，然后文字超出时，出现横向滚动条。.new-select{.el-select-dropdown{max-width:300px;left:0!important;box-shadow:0px2px4px0rgb(000/10%);}.el-select-dropdown_
小怪兽出没_86e0·2021-11-03 11:32

Element-UI 10个奇淫技巧小结

目录el-scrollbar滚动条el-upload模拟点击el-select下拉框选项过长el-input首尾不能为空格el-inputtype=number输入中文，焦点上移el-inputtype
·2021-10-17 10:36

Element中select多数据加载优化的实现

目录场景代码实现总结：场景近期着手开发基于ElementUI的后台管理系统，偶然间发现「el-select」下拉选择时候遇到一个问题，当渲染下拉选项的「options」的数据量过多时「本项目中的数据条目已过万
·2021-09-26 17:21

el-select、el-tree、el-cascader 搜索功能（支持大小写）

第一种方法：组件自定义方法(支持大小写的前提是后端需要提供大写和小写的字段，或者自己将value值转换)第一步：HTML上配置第二步：filter(data,value){//弹窗-拼音过滤returndata.data.pinyin.indexOf(value)!==-1||data.data.label.indexOf(value)!==-1},第二种：方法使用cnchar插件实现，非常简单！
匹诺曹Er·2021-09-09 11:20

el-select设置默认值后选项无法切换

在写vue项目时，设置页面下拉框的默认值时，后台获取数据绑定后，重新选择后，一直无法切换选项，查了半天原来是页面渲染的问题。原因：出现这个问题就是因为绑定了对象（需求如此），只是改变对象的一个属性值，render函数没有自动更新，数据刷新了，但是视图没有刷新。解决方案：调用this.$forceUpdate就是重新render。
ing1023·2021-09-03 19:52

总结Vue Element UI使用中遇到的问题

目录一、DateTimePicker日期选择范围为当前时间以及当前时间之前二、DateTimePicker日期选择范围数组的拆分三、el-select选择器options的value/label采用拼接的方式四
·2021-08-31 19:07

element-ui的el-select比较好的实现全选功能，选中时不显示全选

看了网上的全选实现方式，总结出了下面比较好的实现方式。不会侵入以前的代码，代码也比较简单Talkischeapshowmethecode全选exportdefault{data(){return{options:[{value:"1",label:"黄金糕"},{value:"2",label:"双皮奶"},{value:"3",label:"蚵仔煎"},{value:"4",label:"龙须面
前端三少·2021-08-24 07:42

修改elementUi自带组件样式不生效问题及解决

然后我再一次遇到了，在使用el-select时，修改el-select-dropdown的样式不生效。原因分析后来审查元素时发现渲染后的dom元素压根儿就不在#app元素内部。
进击吧xy·2021-08-19 16:35

修改element ui select组件样式遇到的坑

如何修改el-select的样式：popper-append-to-body和popper-class因需求需要封装了一个带树形选择的单选组件，但是样式显示上出现了问题只有一个option,所以这个选项默认带了
yurisa139·2021-08-18 16:07

基于element-ui的el-select实现的 滚动分页加载

功能基本介绍基于element-ui的el-select实现的。已封装成组件，可以实现单选、多选、远程搜索、滚动分页加载数据、数据回显。效果微信截图_202107271730
1f7e4d5d72cf·2021-07-28 11:58

element中el-select、el-radio-group、el-checkbox-group所显示的值不正确？不是默认值？

element-UI的el-select组件里，当v-model绑定为对象类型，并对其设定默认值图1从后端获取数据，给select设置默认值，将会发现如下结果图2为何不是现实下拉类表中的值，原因是：el-option
柯柯的呵呵哒·2021-07-06 11:46

elementUI的el-select 默认值显示value不显示label问题

我们再真实的项目中，当我们通过el-select选择一个下拉选项时，除非是我们从新做了一次新的选择，不管什么情况都会显示我们选中的选项。
彬彬_不安分的人生·2021-06-23 12:39

2019-12-10 vue data中对象添加

问题是以下这种代码{{item.menuName}}el-select用了v-for来渲染数据，所有数据都会根据接口获取的transitionMenuList来渲染但是在实现过程中接口成功后用this.transitionMenuList
山北边的人·2021-06-15 10:29

el-select / el-autocomplete下拉列表

el-selectfilterable属性模糊搜索功能//下拉框展示，左侧显示姓名，右侧显示手机号{{item.patientName}}{{item.patientPhone}}:filter-method绑定filter方法它会在输入值发生变化时调用，参数为当前输入值。searchPsrAddEnquiryVo(patientName){this.psrAddEnquiryVoUser.pag
琳媚儿·2021-05-16 23:45

Vue 常见问题

Vue常见问题一、el-select数据回显问题参考文章：https://blog.csdn.net/fyydashen/article/details/109361172二、el-tableexpend
不染心·2021-04-30 16:28

Vue中用element-ui封装的el-tree和el-select实现下拉树状多选单选，灵活自定义模糊查询、单选多选，默认选中值。

element-ui下拉树状多选单选一.实现效果1.多选样式2.单选样式二.组件代码三.引入方法一.实现效果1.多选样式2.单选样式二.组件代码文件路径：pages/publicComp/selectTree全选//点击外部关闭下拉框importClickoutsidefrom"element-ui/src/utils/clickoutside";import$from"jquery";impor
前端小菜菜鸟·2021-04-28 16:42

el-select 自定义过滤方法

看了element官网API，找到了filterable，可以搜索下拉结果集，但是有一个细节，在某个浏览器下，打开中文输入法，敲几个英文，不打回车键，会发现无法搜索，下拉结果集还是初次展开的效果，试着在这个浏览器下去打开百度搜搜，发现没有这样的问题，why?难道需要自己写自定义的过滤方法吗？watch观察变化watch:{"mySelect":function(newVal){if(!newVal
A阿姗·2021-04-19 02:03
上一页 9 10 11 12 13 14 15 16 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他