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属性加上就可以了。
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
解决el-upload批量上传只执行一次成功回调on-success的问题
这篇文章主要介绍了解决el-upload批量上传只执行一次成功回调on-success的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2023-03-03Vue Element前端应用开发之常规Element界面组件
在我们开发BS页面的时候,往往需要了解常规界面组件的使用,小到最普通的单文本输入框、多文本框、下拉列表,以及按钮、图片展示、弹出对话框、表单处理、条码二维码等等,本篇随笔基于普通表格业务的展示录入的场景介绍这些常规Element组件的使用2021-05-05前端项目vue3/React如何使用pako库解压缩后端返回gzip数据
pako是一个流行的JS库,用于在浏览器中进行数据压缩和解压缩操作,它提供了对常见的压缩算法的实现,使开发者能够在客户端上轻松进行数据压缩和解压缩,这篇文章主要介绍了前端项目vue3/React使用pako库解压缩后端返回gzip数据,需要的朋友可以参考下2024-07-07
最新评论