element ui中select动态获取选项与多级联动,且可输入关键字

tech2025-10-13  5

element ui中el-select动态获取选项与多级联动,且可输入关键字 具体代码如下:

<template> <el-select v-model="valuelesson" placeholder="请输入关键词" class="interval" @change="selectlesson" filterable remote :filter-method="dataFilter"> <el-option v-for="item in lessonlist" :key="item.id" :label="item.name" :value="item.id"> </el-option> </el-select> <el-select v-model="valuechapter" placeholder="请选择" class="interval"> <el-option v-for="item in chapterlist" :key="item.id" :label="item.name" :value="item.id"> </el-option> </el-select> </template> <script> export default { data() { return { date: "", valuelesson:"", lessonlist:[], search:[], valuechapter:"", chapterlist:[], }; }, 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 }); }, //第二个下选框获取数据接口调用 getallchapter(id){ //id为第一个下拉框选中获取的id,作为参数传给第二个接口 //这个所传的参数必须是获取的第一个下拉框选中的 this.$http .get(`第二个下拉框选项接口地址`+id, { }) .then(res => { //console.log(res.data) this.chapterlist=res.data; this.valuechapter=res.data.name }); }, //选择第一个下拉框显示相应的,例如选择课程显示相应课程下的章节 selectlesson(){ //console.log(this.valuelesson); //this.valuelesson为第一个下拉框选择的id this.getallchapter(this.valuelesson) }, } }; </script>

以上即下拉框二级联动,如果多级的思路还是第一个下拉框所需的接口正常调用,第二个下拉框接口中应该传第一个下拉框选中所获取的id之类的,第三个下拉框接口中应该传第二个下拉框选择所获取的id之类的。

最新回复(0)