ElementUI下拉组件el-select一次从后端获取选项并设置默认值方式

 更新时间:2023年01月16日 09:46:32   作者:zero_ghq  
这篇文章主要介绍了ElementUI下拉组件el-select一次从后端获取选项并设置默认值方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

ElementUI el-select一次从后端获取选项并设置默认值

使用ElementUI下拉框组件el-select时遇到一个问题,期望从后端获取选项并设置默认值,其中选项的label为名称,value为id,但是默认值显示出来的是value而非label。

前端代码大致如下:

<el-select style="width: 130px" v-model="extraAttr.value_id" placeholder="请选择属性值" @change="handleSelectAttrValue(extraAttr)" @clear="handleClearAttrValue(extraAttr)" filterable clearable>
    <el-option v-for="(item, index5) in getValues(extraAttr.attribute_id)" :key="index5" :label="item.value" :value="item.value_id"></el-option>
 </el-select>
computed: {
    // 按属性id获取属性取值选项
    getValues() {
        return function (index) {
            let nullValues = [];
            if (this.attrValueMap.has(index)) {
                return this.attrValueMap.get(index);
            }
            return nullValues;
        }
    },
    ...
}

其中,el-select绑定属性值id,在created阶段通过post请求去后端请求所有属性及属性值的信息并缓存到attrValueMap(因为嵌套了三层循环…每一层选择一个值就要同步更改下拉选项),然后在编辑页就有了默认值;el-option通过给computed计算属性传参从attrValueMap中用属性id获取属性值数组。

我的解决方案

给el-select动态绑定disabled属性

这里我的理解是

value_id、传递给计算属性的参数attribute_id和attrValueMap都不变,所以并不能触发重新渲染,那只能更改其他地方去触发重新渲染。

<el-select style="width: 130px" v-model="extraAttr.value_id" placeholder="请选择属性值" @change="handleSelectAttrValue(extraAttr)" @clear="handleClearAttrValue(extraAttr)" filterable clearable :disabled="isAttributeDisabled">
    <el-option v-for="(item, index5) in getValues(extraAttr.attribute_id)" :key="index5" :label="item.value" :value="item.value_id"></el-option>
</el-select>

通过:disabled="isAttributeDisabled"绑定isAttributeDisabled,初始时设置为true,在created阶段post请求结束时更新为false,这样就会触发重新渲染el-select组件

ElementUI Select设置默认值更改选择后值不改变

使用 ElementUI 的 Select 选择器选择了其他选择值,框内的值没有改变,还是显示原来的值,但是绑定的id值变了

解决方案:在选择器的值发生改变时刷新选择器组件:@change=“$forceUpdate()”

<el-select
  v-model="Value"
  placeholder="请选择"
  @change="$forceUpdate()"
>
  <el-option
    v-for="item in List"
    :key="item.id"
    :label="item.name"
    :value="item.id"
  />
</el-select>

注意:

我查找了下绑定值没变的原因是因为我绑定的value值在data中没有定义才会出现这种问题,如果绑定的是对象的话,比如绑定的是obj.value,并且data中已经定义了,还出现了绑定值不变的情况,说明在代码编辑的过程中把obj重新赋值了,赋的值中没有value属性,也就是说把value属性给干掉了,所以会出现绑定值不变的情况,所以要做的就是在代码中把value属性加上就可以了。

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue3配置vite.config.js解决跨域问题的方法

    Vue3配置vite.config.js解决跨域问题的方法

    跨域一般出现在开发阶段,由于线上环境前端代码被打包成了静态资源,因而不会出现跨域问题,这篇文章主要给大家介绍了关于Vue3配置vite.config.js解决跨域问题的相关资料,需要的朋友可以参考下
    2024-07-07
  • vue-cli3.x配置全局的scss的时候报错问题及解决

    vue-cli3.x配置全局的scss的时候报错问题及解决

    这篇文章主要介绍了vue-cli3.x配置全局的scss的时候报错问题及解决,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • 使用vant 自定义弹框全过程

    使用vant 自定义弹框全过程

    这篇文章主要介绍了使用vant 自定义弹框全过程,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-05-05
  • setup+ref+reactive实现vue3响应式功能

    setup+ref+reactive实现vue3响应式功能

    这篇文章介绍了通过setup+ref+reactive实现vue3响应式功能,文中通过示例代码介绍的非常详细。对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-11-11
  • 基于WebRTC实现音视频通话功能

    基于WebRTC实现音视频通话功能

    WebRTC作为一种开放标准的实时通信协议,能轻松实现浏览器之间的实时音视频通信,本次主要分享基于WebRTC的音视频通话技术,讲解WebRTC原理和音视频传输等关键概念,通过案例实践,带大家掌握如何搭建一个音视频通话应用,需要的朋友可以参考下
    2024-05-05
  • vue解决跨域问题(推荐)

    vue解决跨域问题(推荐)

    这篇文章主要介绍了vue解决跨域问题,本文通过实例图文相结合给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-11-11
  • vue-cli构建vue项目的步骤详解

    vue-cli构建vue项目的步骤详解

    这篇文章主要介绍了vue-cli构建vue项目的步骤详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-01-01
  • vue中如何使用embed标签PDF预览

    vue中如何使用embed标签PDF预览

    这篇文章主要介绍了vue中如何使用embed标签PDF预览,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-05-05
  • vue项目前端知识点整理【收藏】

    vue项目前端知识点整理【收藏】

    本文是小编给大家收藏整理的关于vue项目前端知识点,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-05-05
  • el-table表头添加勾选框的实现示例

    el-table表头添加勾选框的实现示例

    本文主要介绍了el-table表头添加勾选框的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-01-01

最新评论