elementui中el-select实时搜索渲染下拉框（可多选对象）

ss_Tina

已于 2023-06-12 15:08:02 修改

阅读量2.5k

点赞数 1

文章标签： elementui vue.js javascript

于 2023-04-28 16:54:39 首次发布

本文链接：https://blog.csdn.net/ss_tina/article/details/130429776

版权

参考文章：

https://blog.csdn.net/weixin_45422304/article/details/126892711

el-select实时输入后调用后端模糊查询接口，赋值在下拉选项里面

代码

 <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:'test1@qq.com'},
				{userName:'张二',userId:'002',mail:'test2@qq.com'},
				{userName:'张三',userId:'003',mail:'test3@qq.com'},
				{userName:'张四',userId:'004',mail:'test4@qq.com'},
			  ];
			}
		},
	}
	
}

回显的时候，通过后端接口返回mails，给mailList 以及mailItem赋值就行