下拉框搜索

前面我们说了输入框搜索功能,这一篇就说下拉框搜索,刚学的同学可能看题目不是很懂,我也找不到一个词怎么形容,所以看下去就明白了。

下拉框搜索跟输入框搜索谁好一点,我也说不上来,比如当你用输入框搜索忘了搜索的名字,或者只记得一个字,这个时候两者结合就很舒服,还是打个比方吧,不会解释。

打个比方,还是在某个表格用来记录整个学校的学生人数,多少个老师,一个学校里肯定有上千乃至上万人,如果你要单独找一个学生出来那肯定很难,所以,就需要一个搜索查找的功能出来。假如你要搜索一个学生的名字,可是你又忘了这个同学姓什么,但你记得这位同学在哪个班,或者哪个年级,这个时候就可以用下拉框搜索,两者结合。

下面就以医院的一个表格为案列来给你们详解。

打开vs创建这些不多说,创建完后,先引用js,不然$会一直会报错,

<script src="~/Plugins/layui/layui.js"></script>

创建表格直接引用layui,这是别人已经建好的,直接引用就可以,里面也有css的文件,根据自己的情况引用。

我们这次一样还是在已经创建好的表格进行详解,
在这里插入图片描述
假如你是医院的一名管理人员,在给某位医生编辑资料的时候编辑错了,要把错误的地方改回来,可是你也不知道这位医生姓什么,但你知道他是一位医生,这个时候你只要把角色类型选中医生就行了。
在这里插入图片描述
下拉框搜索你可以在敲出一个,就更能准确搜索,比如是男是女,哪个科室,我就不再多说,效果出来了,我们就来看代码,先在视图这边先敲多条件查询,字面的意思应该不难理解,怎样绑定下拉框我就不说了,以前说过。
在这里插入图片描述
控制器那边的代码在上一篇有,这篇就不多说了。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要实现element下拉框搜索功能,可以使用element-ui中的el-select组件,并在其中使用el-option组件作为下拉选项。 1. 首先,将el-select组件放置在需要的位置上,并给它一个v-model属性,表示当前选中的值。同时,添加一个filterable属性,表示启用搜索功能。 ``` <el-select v-model="selectedValue" filterable> ... </el-select> ``` 2. 在el-select组件内部,使用el-option组件作为下拉选项。对于需要搜索的选项,可以在el-option组件上添加一个label属性。 ``` <el-select v-model="selectedValue" filterable> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option> </el-select> ``` 3. 在Vue实例中,定义一个options数组,包含所有可选的选项。在需要搜索时,可以通过computed属性进行过滤。 ``` computed: { filteredOptions() { return this.options.filter(option => option.label.toLowerCase().indexOf(this.searchText.toLowerCase()) >= 0); } } ``` 4. 在el-select组件中,使用v-for指令遍历filteredOptions数组,然后将label和value分别作为el-option组件的属性。 ``` <el-select v-model="selectedValue" filterable> <el-option v-for="item in filteredOptions" :key="item.value" :label="item.label" :value="item.value"></el-option> </el-select> ``` 5. 最后,在Vue实例中,定义一个searchText变量,表示当前搜索的文本。可以在el-select组件上添加一个@query-change事件,当搜索文本发生变化时,将searchText变量更新为最新的搜索文本。 ``` <el-select v-model="selectedValue" filterable @query-change="searchText=$event"> ... </el-select> ``` 这样,就可以实现element下拉框搜索功能了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值