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

ElementUI下拉组件 ElementUI el-select ElementUI el-select设置默认值 2023-01-16 12:01:00 955人浏览薄情痞子

摘要

目录ElementUI el-select一次从后端获取选项并设置默认值我的解决方案这里我的理解是ElementUI Select设置默认值更改选择后值不改变总结ElementUI

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属性加上就可以了。