300字范文,内容丰富有趣,生活中的好帮手!
300字范文 > vue+element ui下拉框可搜索(接口返回的数据)

vue+element ui下拉框可搜索(接口返回的数据)

时间:2023-10-23 15:00:23

相关推荐

vue+element ui下拉框可搜索(接口返回的数据)

在el-select中加入filterable属性,就开启了搜索功能,

具体代码在下面:

<template><el-select v-model="valuelesson" placeholder="请输入课程的关键词" class="interval" @change="selectlesson" filterable remote :filter-method="dataFilter"><el-optionv-for="item in lessonlist":key="item.id":label="item.name":value="item.id"></el-option></el-select></template><script>export default {data() {return {date: "",valuelesson:"",lessonlist:[],search:[],};},mounted() {this.getalllesson();},methods: {//下拉课程的时候可以搜索dataFilter(val) {//console.log(val);//console.log(this.lessonlist);//val监听输入的内容,this.lessonlist为接口获取的数据this.lessonlist = val;if (val) {//val存在this.lessonlist= this.search.filter((item) => {if (!!~item.name.indexOf(val) || !!~item.name.toUpperCase().indexOf(val.toUpperCase())) {return true}})} else {//val为空时,还原数组this.lessonlist = this.search;}},getalllesson(){this.$http.get(`接口地址 `, {}).then(res => {//console.log(res.data)this.lessonlist=res.data;this.search=res.data;this.valuelesson=res.data.name});},} };</script>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。