el-select初始化显示value点击能看到label的问题处理

最新推荐文章于 2024-11-13 22:51:53 发布

weixin_45353536

最新推荐文章于 2024-11-13 22:51:53 发布

阅读量778

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.youkuaiyun.com/weixin_45353536/article/details/131133296

版权

本文介绍了在前端开发中遇到的el-select组件初始化显示value而非label的问题，并详细阐述了解决方案。通过监听事件并根据业务逻辑处理，确保初始化和选中状态显示正确。同时，文中提到了在动态表单场景中如何优化接口调用，避免页面卡顿，以及处理分页情况下select初始值的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、事件

1.change 选中值发生变化时触发（val，目前的选中值）
2.visible-change 下拉框出现/隐藏时触发（val，出现则为 true，隐藏则为 false）
3.remove-tag 多选模式下移除tag时触发 val，移除的tag值
4.clear 可清空的单选模式下用户点击清空按钮时触发
5.blur 当 input 失去焦点时触发 (event: FocusEvent)
6.focus 当 input 获得焦点时触发 (event: FocusEvent)

二、问题解决

1.问题描述：
在这里插入图片描述
初始化时显示的时value，点击又出现了label的值，选中改变了就会出现label的值
2.解决后的实现思路

（1）因为接口里面我能拿到每个服务的label，我就先显示这个label。
(2) 点击之后出现选择服务的框，接口钟包含这个服务选择的对象。
（3）我这里绑定的时select的value值，我选中value值改变时，那个默认值也跟着变。但最终接口要传的还是value。
（4）所以我这里只需要处理初始化显示的问题
3.代码实现

（1）初始值我把它写成文字按钮，样式可改变

<el-col :span="810" v-if="domain.actionType === 2">
      <el-form-item
        label="模型服务"
        :prop="'actionList.' + index + '.serviceId'"
        :rules="{
   
          required: true,
          message: '模型服务为必填项',
          trigger

最低0.47元/天解锁文章