el-select
el-select获取当前选择的label值
例如 ``` ``` 获取当前选中的select的label值 ``` let currentLabel = this.$refs.dataTypeSelect1.selected.currentLabel; console.log("当前select选中的label值是:",currentLabe ......
Element ui plus --- el-select 下拉框下拉选项过多导致页面卡顿处理方法
业务场景： 多个页面调用同一个接口 作为下拉框的选项数据，接口返回上千条 导致页面异常卡顿 解决办法： 使用Select V2 虚拟列表选择器 代码示例： <el-form-item label="场所名称"> <el-select-v2 class="row-inp" v-model="query ......
vue3+el-select的watch监听回调触发多次问题
# vue3+el-select的watch监听回调触发多次问题 > 背景： 当时的需求实：通过选择下拉框，改变当前充电桩对象，监听对象变化是刷新表格（echarts）的数据； 结果问题出现：当我选择下拉框中的函数时，watch（）中的刷新表格执行了两次。 * 第一次回调，对象的id变化； ......
el-select支持搜索
<el-select v-if="isShowCompanyOpts" :disabled="props.isView" v-model="ruleFiltersDto.orgId" filterable remote placeholder="请选择" :remote-method="remote ......
vue中el-select 多选限制条件（根据不同选项进行不同可选可不选）
首先看一个数据结构： 1：无缺陷 2：有缺陷-》缺陷1，缺陷2，缺陷3 3：审核不通过 把它们集成到一个平面数据，进行下拉所选就变成了： 1：无缺陷，2：审核不通过，3：缺陷一，4：缺陷二，5：缺陷三。 因为字典项是个平面的，所以在类似的大批量的情况下，有缺陷这个类如果还按照这种结构除非自己去归类。 ......
el-select @change绑定item对象
正常写，注意的是需要在<el-select>标签上加一个属性 value-key，把<el-option>的key赋值给他，如下图。 ......
Element table 表格中 el-select 传递参数，自定义参数
<el-table-column prop="cvRobotName" label="机器人" align="center" v-if="mode !== 2"> <template slot-scope="item"> <el-select v-model="tableData[scope.$in ......
el-select数据太多造成页面卡顿？el-select实现触底加载
当我们使用el-select下拉框的时候，会遇到后端放回的数据太过庞大（成千上万条），导致页面渲染的时候造成卡顿现象。这时候我们可以利用触底加载方法减少资源的消耗，避免页面卡顿。 思路：这时候我们可以利用vue的自定义指令，监听到他的下拉滚动事件，当滚动到最后时，（下拉宽高度+可滑动高度距离底部的距 ......
vue3自定义指令实现el-select下拉加载更多
1. 新建js文件 export default (app) => { app.directive('loadmore', { beforeMount(el, binding) { const element = el.querySelector('.t-select__dropdown'); el ......
给el-table或给el-select添加懒加载
1、在组件上写上自定义事件的名称 v-el-table-tableLazy="tableLazy" 或 v-el-select-selectLazy="selectLazy" 2、在export default 内上自定义事件指令 directives: { "el-select-selectLaz ......
使用 el-dropdown 实现 el-select 的效果
一：效果 效果1：点击el-input后，展开 下拉菜单， 选择一个选项后，在el-input组件显示被选择的数据 效果2： el-dropdown-menu 有一定高度，超过scroll 滚动 效果3：再次打开高亮被选择的数据 效果4：打开下拉选项后，滚动条定位到被选择item的位置 二：实现方式 ......
【element UI】修改 el-select 下拉框样式
前言 项目中经常使用到 el-select 组件，默认的 el-select 组件样式不符合项目实际需要，需要进行样式修改，这里记录下样式的修改步骤。 借鉴文章：https://blog.csdn.net/qq_26695613/article/details/127870263 实现过程 官方文档 ......
vue中el-select，el-radio-group设置默认值
首先来说设置默认值是用v-model去绑定一个值， 如下，一般大家用label是来展示具体展示在前端的文字，value是这组对象里每个对象的标识。 打个比方item.label是姓名，item.value是学号，学号不在前端展示。这样的话，v-model绑定的字符串对象写item.label的值。 ......
el-select下拉小三角替换掉
.el-cascader .el-input__icon.el-icon-arrow-up:before { content: '\e790'; } .el-select .el-select__caret.el-icon-arrow-up:before { content: '\e790'; } ......
el-select样式自定义
输入框样式的修改 <style lang="scss" scoped> // 设置输入框的长度为：102px; /deep/.el-input--suffix .el-input__inner { padding-right: 102px; } // 设置输入框的背景色、字体颜色、边框属性设置； / ......
el-select的remote远程搜索时，重新打开时，下拉选项为上一次查询的结果
问题描述 第一次搜索结果，没有 选择。关闭后再次打开 下拉框选项还是上一次的搜索结果。 这个现象能理解，但是也能被挑刺，遂修改——再次点击的时候，展示全部 解决思路： 使用el-select的@visible-change方法，监听下拉框打开关闭事件。 关闭时，将下拉选项的内容改为全部条件。 ......