el-select支持搜索

发布时间 2023-06-27 17:13:11作者: 幻影之舞
<el-select v-if="isShowCompanyOpts" :disabled="props.isView"
          v-model="ruleFiltersDto.orgId" filterable
          remote
      placeholder
="请选择"
      :remote-method
="remoteMethod" @focus="getAllCompany"> <el-option v-for="company in companyOpts" :label="company.name" :value="company.id" :key="company.id"/> </el-select>

标签设置remote. 并给remote绑定一个方法,即 remote-method

// query 是要搜索的字符
const remoteMethod = (query: string) => { if (query) { setTimeout(() => {
       // 展示的数据 = 总数居过滤后合适的数据  companyOpts.value
= list.value.filter((item: any) => { return item.name.toLowerCase().includes(query.toLowerCase()) }) }, 200) } }