Reference article:
https://blog.csdn.net/weixin_45422304/article/details/126892711
el-select calls the back-end fuzzy query interface after real-time input, and the assignment is in the drop-down option
the code
<el-form-item label="收件人" prop="mails">
<el-select v-model="mailItem"
multiple
clearable
filterable
placeholder="请输入收件人姓名(支持模糊查询)"
remote
:remote-method="remoteLoad"
value-key="userId"
style="width:80%">
<!-- 如果value是对象的话，要设置value-key remoteLoad实时调用后端接口模糊查询渲染下拉列表 --->
<el-option v-for="item in mailList" :key="item.userId" :label="`${item.userName}-${item.mail}`" :value="item"/>
</el-select>
<br>
<el-input type="textarea" v-model="dataForm.mails" autosize :rows="3" readonly disabled style="margin-top:5px;width:80%;"></el-input>
</el-form-item>export default {
data() {
return {
dataForm: {
userIds:'',
mails:'',
},
mailItem:[],//多选是数组
mailList:[],
};
},
watch:{
mailItem:{
handler(newItem){
if(newItem && newItem.length>0){
let userIds = newItem.map((user)=>{
return user.userId;
}).join(",");
let mails = newItem.map((user)=>{
return user.mail;
}).join(",");
this.dataForm.userIds = userIds;
this.dataForm.mails = mails;
}else{
this.dataForm.userIds = '';
this.dataForm.mails = '';
}
}
}
},
methods: {
remoteLoad(queryName){
if(queryName){
//调用后端获取列表后赋值
this.mailList=[
{userName:'张一',userId:'001',mail:'[email protected]'},
{userName:'张二',userId:'002',mail:'[email protected]'},
{userName:'张三',userId:'003',mail:'[email protected]'},
{userName:'张四',userId:'004',mail:'[email protected]'},
];
}
},
}
}
When echoing, return mails through the backend interface, and assign values to mailList and mailItem