vue实现下拉框动态筛选

实现效果如下：

具体代码入下：
1、其中：filterable :filter-method="dataFilter"为过滤的关键

 <el-col :span="24" v-if="showTransact"><el-form-item label="New Issue Owner:"><el-select v-model="form.turn_to_transact" :disabled='isEditResolution' placeholder="Please Choose Administrative Person" filterable :filter-method="dataFilter" clearable><el-option v-for="item in optionsCopy" :key="item.value" :label="item.label" :value="item.value"></el-option></el-option></el-select></el-form-item></el-col>

2、dataFilter的方法
首先要初始化一个approveUserOption，并且让optionsCopy = approveUserOption。如果为则给optionsCopy 复制approveUserOption。

    dataFilter(val) {if (val) { //val存在debugger;var str = ".*"+val.toLowerCase()+".*"let reg = new RegExp(str)this.optionsCopy = this.optionsCopy.filter((item) => {if(item.label){return reg.test((item.label.toLowerCase()).replaceAll(" ",""))}else{return false;}})}else{this.optionsCopy = this.approveUserOption;}if(this.optionsCopy.length == 0){this.optionsCopy = this.approveUserOption;}}

vue实现下拉框动态筛选相关推荐

Vue下拉框动态加载数据
Vue下拉框动态加载数据 <template><a-select v-model="model.type" show-search placeholder=&qu ...
Vue封装下拉框组件时，为document绑定原生事件addEventlistener(click“)，切换页面之后事件还未被摧毁...
1 <script> 2 export default { 3 props: ["lists"], 4 data() { 5 return { 6 isactive: ...
DataGridView下拉框动态赋值以及事件处理
第一种: 下拉框动态赋值: private void Form1_Load(object sender, EventArgs e) { //获取数据源list ...
Excel — 动态图表（下拉框动态图）
下拉框动态图:根据下拉框选择的值,使图表动态变化.过程如下 [开发者工具]->[插入]->[组合框] 画好下拉框后,右键->[设置控件格式] 选择[数据源区域].[单元格链接] 查看 ...
vue省市区下拉框实现
vue省市区下拉框实现 1.效果如图选中省之后,再选择对应的市,再选择对应的区数据源js文件: 码云:https://gitee.com/wyjpositive/mybatis-plus-dem ...
vue项目下拉框内容过长做一个滚动条的效果
vue项目下拉框内容过长做一个滚动条的效果如下图: 关键代码如下:
element做树形下拉_一个基于 elementUi的vue树形下拉框组件
# wl-vue-select,wl-tree-selectcss # 简介vue 用于vue框架的树形下拉框及带全选的普通下拉框. node Tree drop-down box for vue ...
Vue element 下拉框可输入可选择(无bug)
背景: 需要一个可填可选的下拉框当用户自定义输入时,自动添加"(其他)"后缀效果如下: <el-select v-model="value"place ...
微搭低代码实现下拉框动态填充值
有个粉丝问我,微搭的下拉框如何自动填充值想问一下,下拉控件需要绑定数据源里面的列表,这个需要怎么做,自己研究了蛮久也没弄出来,需要参考您哪一篇教程? 一般你字段设置为枚举类型就可以,如果是动态的,你 ...

vue实现下拉框动态筛选

vue实现下拉框动态筛选相关推荐

最新文章

热门文章