el-select 选择器 当value有值但label为空,默认value值作为下拉框值时

本人在写项目时发现,当 el-select 下拉框的值,value 有值的时候,label 为空时,下拉默认展示的数据是 value 值,且选中传值也是 value 值,而不是我想要的 label 空值

至于为什么会默认展示value值,暂未知晓,谁知道可以告诉我一下,我记录一下。

经过网络参考

我的做法是给他个默认的label值(toStr):

<el-select
          size="small"
          v-model="drugs.drug_type2"
          allow-create
          filterable
          default-first-option
          clearable
          placeholder="药品分类2"
          @change="
            (val) => {
              category(val, options2);
            }
          "
        >
          <el-option
            v-for="item in options2"
            :key="item.value"
            :label="toStr(item.label)"
            :value="item.value"
          >
          </el-option
        ></el-select>
    // 当label值为空,想要选中空的label值
    toStr(str) {
      let data;
      if (str) {
        data = encodeURI(str);
      } else {
        data = "暂无名称";
      }
      data = data.replace(/&nbsp;/g, "%20");
      return decodeURI(data);
    },

这样展示的数据 label为 空的时候展示出来的就是“暂无数据”,且使用的时候,得到的相对应的数据也是我想要的 “空值”

### 实现 `el-select` 下拉框可输入功能 为了使 `el-select` 组件支持用户手动输入,需使用带有过滤器的远程搜索特性或允许创建新条目。下面展示两种常见方式来实现这一需求。 #### 方式一:启用筛选并允许创建标签 这种方式适用于希望用户既能从已有选项中选择也能添加新的选项场景。通过设置属性 `filterable` 和 `allow-create` 可轻松达成目标[^1]。 ```html <template> <div> <!-- 启用筛选和创建 --> <el-select v-model="value" multiple filterable allow-create default-first-option placeholder="请选择文章标签"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option> </el-select> </div> </template> <script setup> import { ref } from 'vue' const value = ref([]) const options = [ { value: 'HTML', label: 'HTML' }, { value: 'CSS', label: 'CSS' } ] </script> ``` 此配置使得组件不仅能够显示预设列表供用户挑选,还接受未列于其中的新输入作为合法的选择项。 #### 方式二:结合远端搜索提供动态数据源 当面对大量可能选项,采用服务器端分页加载能有效提升性能体验。此应开启 `remote` 属性,并指定处理查询请求的方法 `remote-method` 来获取匹配的数据集[^2]。 ```html <template> <div> <!-- 使用远端搜索 --> <el-select v-model="valueRemote" remote reserve-keyword clearable placeholder="请输入关键词" :remote-method="remoteMethod" :loading="loading"> <el-option v-for="item in restaurants" :key="item.value" :label="item.name" :value="item.name"></el-option> </el-select> </div> </template> <script setup> import { ref, watch } from 'vue' let loading = ref(false) let valueRemote = ref('') let restaurants = ref([]) function remoteMethod(query) { if (query !== '') { loading.value = true; setTimeout(() => { loading.value = false; const result = restaurantNames.filter(item => item.includes(query)) .map(name => ({ name })); restaurants.value = result.slice(0, 10); }, 200); } else { restaurants.value = []; } } // 示例餐厅名称数组用于模拟异步调用返回的结果 const restaurantNames = ['麦当劳', '肯德基', ...]; // 更多名字省略... </script> ``` 上述代码片段展示了如何利用 Element Plus 的 `el-select` 构建一个具备实搜索能力的选择控件,它会依据用户的输入向后台发起 AJAX 请求以检索符合条件的信息记录。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值