【el-select】下拉框实现名称和ID同时搜索

场景描述

ElementUI 下拉框( el-select ) 要求实现id和name同时匹配（有一项模糊匹配到即可）

效果图

代码实现

自定义搜索事件，过滤选项值

<el-select v-model="listQuery.custId" placeholder="请输入客户名称/ID" clearable filterable size="mini" :filter-method="dataFilter" @change="handleQuery">
  <el-option v-for="option in optionList" :key="option.custId" :label="option.custName" :value="option.custId">
    <span style="float: left">{{ option.custId }}</span>
    <span style="color: #8492a6; font-size: 13px; margin-left: 10px;">{{ option.custName }}</span>
  </el-option>
</el-select>

computed: {
    ...mapState('project/caches', ['bdCustomers']), // 从store中获取存储的选择数据（数据源）
    optionList() { // 根据输入内容动态处理选项
      if (!this.listQuery.custId) { return this.bdCustomers }
      const arr = this.bdCustomers.filter(v => {
        return v.custId.indexOf(this.listQuery.custId) !== -1 || v.custName.indexOf(this.listQuery.custId) !== -1 // 字符串是否包含该字符
      })
      return arr
    }
}

methods: {
    dataFilter(val) { // 自定义搜索方法
      this.$set(this.listQuery, 'custId', val)
    }
}