el-select远程搜索,查询条件为空,没有搜索到数据时,展示“无数据”

el-select远程搜索,查询条件为空,没有搜索到数据时,展示“无数据”

现状:1、查询条件没有值,远程接口没有数据时,不展示“无数据”;
2、查询条件有值,远程接口没有数据时,可以展示“无数据”;

源码:

emptyText() {
   if (this.loading) {
     return this.loadingText || this.t('el.select.loading');
   } else {
     if (this.remote && this.query === '' && this.options.length === 0) return false;
     if (this.filterable && this.query && this.options.length > 0 && this.filteredOptionsCount === 0) {
       return this.noMatchText || this.t('el.select.noMatch');
     }
     if (this.options.length === 0) {
       return this.noDataText || this.t('el.select.noData');
     }
   }
   return null;
 },

解析:
查询条件没有值,远程接口没有数据时,手动给组件赋值一个空格字符串,使其走到「查询条件有值,远程接口没有数据时」的判断,也就展示了“无数据”

if (this.searchValue == '' && !result.length) { //todo 如果查询条件为空,并且没有查到数据
  const selectRef: any = this.$refs.select;
  selectRef.query = ' '
}

el-select远程搜索,查询条件为空,没有搜索到数据时,展示“无数据”_第1张图片

你可能感兴趣的:(vue.js,javascript,ecmascript)