el-select drop-down box multi-select remote search anti-display

 

<el-form-item label="**方:" prop="coSponsorIds">
          <el-select v-if="isShow" v-model="form.coSponsorIds" placeholder="请输入**方名称"
            :style="{width: '100%'}"
            multiple // 是否多选
            filterable//为el-select添加filterable属性即可启用搜索功能
            remote //是否为远程搜索
            reserve-keyword //多选且可搜索时，是否在选中一个选项后保留当前的搜索关键词
            :remote-method="getcoSponsorNamesList" // 远程搜索方法
            :loading="loading">
            <el-option v-for="(item, index) in coSponsorNamesList" :key="index" :label="item.deptName"
              :value="item.deptId" :disabled="item.disabled"></el-option>
          </el-select>
          <p style="margin: 0px;" v-else  v-for="(item, index) in seestopConference.coSponsorIds" :key="index">
            <span>{
   
   {item}}</span>
          </p>
          </el-form-item>
  

1 can be searched

Add field: filterable

 <el-form-item label="**方:" prop="coSponsorIds">
          <el-select
            v-model="coSponsorIds"
            placeholder="请输入**方名称"
            :style="{ width: '300px' }"
            filterable
          >
            <el-option
              v-for="(item, index) in coSponsorNamesList"
              :key="index"
              :label="item.deptName"
              :value="item.deptId"
              :disabled="item.disabled"
            ></el-option>
          </el-select>
        </el-form-item>

 

2 Perform fuzzy query

 test code

<template>
  <div>
    <div id="button">
      <el-form>
        <el-form-item label="**方:" prop="coSponsorIds">
          <el-select
            v-if="isShow"
            v-model="coSponsorIds"
            placeholder="请输入**方名称"
            :style="{ width: '300px' }"
            multiple
            filterable
            remote
            reserve-keyword
            :remote-method="getcoSponsorNamesList"
            :loading="loading"
          >
            <el-option
              v-for="(item, index) in coSponsorNamesList"
              :key="index"
              :label="item.deptName"
              :value="item.deptId"
              :disabled="item.disabled"
            ></el-option>
          </el-select>
          <p
            style="margin: 0px;"
            v-else
            v-for="(item, index) in seestopConference.coSponsorIds"
            :key="index"
          >
            <span>{
   
   { item }}</span>
          </p>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      isShow: true,
      loading: false,
      coSponsorIds: '',
      coSponsorNamesList: [
        {
          deptName: '11',
          deptId: 11,
          disabled: false
        },
        {
          deptName: '22',
          deptId: 22,
          disabled: false
        },
        {
          deptName: '33',
          deptId: 33,
          disabled: true
        }
      ],
      seestopConference: {
        coSponsorIds: '1'
      }
    }
  },
  methods: {
    async getcoSponsorNamesList (query) {
      if (query !== '') {
        this.remoteMethodLoading = true
        console.log('查询条件：' + query)
        // await this.getOrgList(
        //   {
        //     orgCode:
        //       process.env.NODE_ENV === 'development'
        //         ? '00000100'
        //         : this.userOrgCode,
        //     distCode: this.distCode,
        //     distLevel: this.distLevel,
        //   },
        //   query
        // );

        this.remoteMethodLoading = false
      } else {
        // this.orgList = this.allOrgList;
      }
    }
  }
}
</script>

<style scoped></style>