el-select动态获取数据实现可搜索+插槽展示

原创已于 2024-12-12 17:08:30 修改 · 957 阅读

19 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui #前端

于 2024-12-10 10:41:25 首次发布

必须添加filterable属性

代码如下：<el-select v-model="returnInfo.handoverUser" filterable :filter-method="filterMethodUser" style="width:100%" clearable> <el-option v-for="item in userListTemp" :key="item.userId" :label="item.nickName" :value="item.userId"> {{ item.nickName }} {{ item.userName }} </el-option> </el-select>

js中声明：export default {
data(){
return{userListTemp: [],

returnInfo:{handoverUser：" "},
}
}
},

调接口获取数据：

代码如下：getTransfusionList(){ allocatedUserList({pageNum:1,pageSize:100,roleId:11}).then(res=>{ this.userListTemp=res.rows; }) },

筛选数据：

代码如下：filterMethodUser(val) { const users = JSON.parse(JSON.stringify(this.userListTemp)); this.userListTemp = users.filter((item) => (item.nickName && item.nickName.includes(val)) || (item.userName && item.userName.includes(val))); }