Element-UI el-select下拉框自定义过滤选项全选

最新推荐文章于 2024-05-11 12:12:57 发布
最新推荐文章于 2024-05-11 12:12:57 发布
阅读量450 收藏
点赞数
分类专栏： Vue 文章标签： ui vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaohuihui1400/article/details/138353057
版权
Vue 专栏收录该内容
34 篇文章 7 订阅 ¥19.90 ¥99.00
订阅专栏

文章目录

前言

Element-UI el-select下拉框多选实现全选 在这篇文章介绍了添加 el-option、el-checkbox 两种方式实现下拉框多选实现全选。

本文将介绍添加 el-button 的方式实现下拉框自定义过滤选项全选，当然也可以添加 el-option、el-checkbox 等等来实现。

一、思路讲解

element UI 框架中的 select 选择器提供了 filter-method 方法用于自定义过滤选项的方式，添加 filterable 属性即可启用搜索功能。

filter-method 属性为一个Function，它会在输入值发生变化时调用，参数为当前输入值。

二、完整代码示例

<template>
  <div>
	  <
了解本专栏 订阅专栏 解锁全文
一碗情深
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
订阅专栏
Element-UI el-select下拉框多选实现全选
一碗清深的博客
11-17 3214
在el-select下拉框中实现多选全选的功能
基于elementui封装的一个VUE筛选下拉框
08-09
基于element-ui封装的一个VUE筛选下拉框
el-select 支持全选，多选，自定义搜索全选
m0_55558279的博客
06-21 949
【代码】【无标题】
ElementPlus 之 el-select 多选实现全选功能
都随它大小便吧
05-05 2777
经常会遇到这种多选下拉框支持全选的需求，在此简单记录一下在 ElementPlus 框架下，如何使得多选的 el-select 控件支持实现全选功能。
若依 ruoyi-vue el-select 多选框 全选 反选 全不选 查询功能
Xiaoweidumpb
04-11 1298
/input是默认双向绑定事件，select控件也可以用input给父组件传递数据。//监听父组件v-model数据变化，修改父组件selectData。// 监听子组件selectData变化,修改父组件v-model。// 第一次打开,初始化 selectData。// 直接修改 selectData 数组。//接受父组件v-model数据。// 已选中的项，不加入反选列表。如图，优化代码，支持若依字典。//模糊查询并且不存在。
详解element-ui中el-select的默认选择项问题
12-29
直接绑定将option中的value值绑定给v-model <template> <div> <el v-model=query> <el v-for=item key=item.value value=item.value label=item.label></el> </el> </div> </template> [removed] export default{ data() { return { options: [{ value: '01',
Element-UI合集之el-select
风流三月1
01-17 423
前提条件：传统开发模式下（非NodeJs），直接引用文件 引入文件 <!-- import CSS --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <!-- import Vue before Element --> <sc...
element ui之el-select使用
楚璃轩
09-09 905
v-model绑定的值与option选项value值对应， label值为显示的标签 <el-select v-model="updatelist.diseCategoryId" placeholder="请选择" > <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> <span style="float: left">{{
el-select多个时，el-select筛选选中过的值，第二个el-select中过滤上一个选中的值
weixin_41346436的博客
06-01 1222
代码
Element-UI中Select选择器讲解（el-select详解）
热门推荐
辰兮要努力
11-22 9万+
本篇整理了el-select相关组件的基础用法，也正是这个组件，让我更加喜欢vue，更加喜欢element-ui，欢迎阅读学习，分享获取新知，大家一起进步。
Vue + Element-ui的下拉框el-select获取额外参数详解
12-28
直接上代码吧~ <el label=用户类型 width=180> <template slot-scope=scope> <el v-model=scope.row.roleID placeholder=请选择 change=changeRole($event,scope)> <el-option v-for=item in roles :key=item.value :l
在element-ui的select下拉框加上滚动加载
10-17
Element-UI的`<el-select>`组件提供了一个方便的方式来选择数据，但默认情况下，当数据量过大时，一次性加载所有选项可能会导致页面性能下降。为了解决这个问题，我们可以实现一个滚动加载功能，即在用户滚动到...
el-select 下拉框多选实现全选的实现
10-16
主要介绍了el-select 下拉框多选实现全选的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
el-select下拉框 添加 el-checkbox 多选框，支持全选、取消全选
最新发布
rudy_zhou的博客
05-11 1716
基于el-select 与 el-checkbox 实现多选框全选，取消全选 交互
el-select 可输入，可选择
qq_51389137的博客
01-29 1304
【代码】el-select 可输入，可选择。
element-ui 使用el-select创建虚拟下拉列表
qq_21691233的博客
03-14 1034
虚拟列表 elementui vue
vue+elementUI el-select 自定义搜索逻辑（filter-method）
sumimg的博客
09-05 3436
下拉列表的默认搜索是搜索label显示label,我司要求输入id显示label名称。使用filter-method方法筛选数据。首先mounted加载数据。
写一个vue 和 element-ui 点击el-select下拉框出发el-tree勾选的代码
04-05
<template> <div> <el-select v-model="selected" @change="handleChange"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" /> </el-select> <el-tree :data="data" :props="defaultProps" ref="tree" /> </div> </template> <script> export default { data() { return { selected: '', options: [ { label: 'Option 1', value: '1' }, { label: 'Option 2', value: '2' }, { label: 'Option 3', value: '3' }, ], data: [ { label: 'Level 1', children: [ { label: 'Level 1-1' }, { label: 'Level 1-2' }, { label: 'Level 1-3' }, ], }, { label: 'Level 2', children: [ { label: 'Level 2-1' }, { label: 'Level 2-2' }, { label: 'Level 2-3' }, ], }, ], defaultProps: { children: 'children', label: 'label', checked: 'checked', isLeaf: 'isLeaf', }, } }, methods: { handleChange() { this.$nextTick(() => { const tree = this.$refs.tree const node = tree.getNode(this.selected) if (node) { tree.setChecked(node.data, true) } }) }, }, } </script>
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

一碗情深

你的鼓励是我创作最大的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值