快捷導(dǎo)航

ElementUI下拉組件el-select一次從后端獲取選項(xiàng)并設(shè)置默認(rèn)值方式

更新時(shí)間：2023年01月16日 09:46:32 作者：zero_ghq

這篇文章主要介紹了ElementUI下拉組件el-select一次從后端獲取選項(xiàng)并設(shè)置默認(rèn)值方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

ElementUI el-select一次從后端獲取選項(xiàng)并設(shè)置默認(rèn)值

使用ElementUI下拉框組件el-select時(shí)遇到一個(gè)問(wèn)題，期望從后端獲取選項(xiàng)并設(shè)置默認(rèn)值，其中選項(xiàng)的label為名稱(chēng)，value為id，但是默認(rèn)值顯示出來(lái)的是value而非label。

前端代碼大致如下：

<el-select style="width: 130px" v-model="extraAttr.value_id" placeholder="請(qǐng)選擇屬性值" @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獲取屬性取值選項(xiàng)
? ? getValues() {
? ? ? ? return function (index) {
? ? ? ? ? ? let nullValues = [];
? ? ? ? ? ? if (this.attrValueMap.has(index)) {
? ? ? ? ? ? ? ? return this.attrValueMap.get(index);
? ? ? ? ? ? }
? ? ? ? ? ? return nullValues;
? ? ? ? }
? ? },
? ? ...
}

其中，el-select綁定屬性值id，在created階段通過(guò)post請(qǐng)求去后端請(qǐng)求所有屬性及屬性值的信息并緩存到attrValueMap（因?yàn)榍短琢巳龑友h(huán)…每一層選擇一個(gè)值就要同步更改下拉選項(xiàng)），然后在編輯頁(yè)就有了默認(rèn)值；el-option通過(guò)給computed計(jì)算屬性傳參從attrValueMap中用屬性id獲取屬性值數(shù)組。

我的解決方案

給el-select動(dòng)態(tài)綁定disabled屬性

這里我的理解是

value_id、傳遞給計(jì)算屬性的參數(shù)attribute_id和attrValueMap都不變，所以并不能觸發(fā)重新渲染，那只能更改其他地方去觸發(fā)重新渲染。

<el-select style="width: 130px" v-model="extraAttr.value_id" placeholder="請(qǐng)選擇屬性值" @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>

通過(guò):disabled="isAttributeDisabled"綁定isAttributeDisabled，初始時(shí)設(shè)置為true，在created階段post請(qǐng)求結(jié)束時(shí)更新為false，這樣就會(huì)觸發(fā)重新渲染el-select組件

ElementUI Select設(shè)置默認(rèn)值更改選擇后值不改變

使用 ElementUI 的 Select 選擇器選擇了其他選擇值，框內(nèi)的值沒(méi)有改變，還是顯示原來(lái)的值，但是綁定的id值變了

解決方案：在選擇器的值發(fā)生改變時(shí)刷新選擇器組件:@change=“$forceUpdate()”

<el-select
? v-model="Value"
? placeholder="請(qǐng)選擇"
? @change="$forceUpdate()"
>
? <el-option
? ? v-for="item in List"
? ? :key="item.id"
? ? :label="item.name"
? ? :value="item.id"
? />
</el-select>

注意：

我查找了下綁定值沒(méi)變的原因是因?yàn)槲医壎ǖ膙alue值在data中沒(méi)有定義才會(huì)出現(xiàn)這種問(wèn)題，如果綁定的是對(duì)象的話，比如綁定的是obj.value，并且data中已經(jīng)定義了，還出現(xiàn)了綁定值不變的情況，說(shuō)明在代碼編輯的過(guò)程中把obj重新賦值了，賦的值中沒(méi)有value屬性，也就是說(shuō)把value屬性給干掉了，所以會(huì)出現(xiàn)綁定值不變的情況，所以要做的就是在代碼中把value屬性加上就可以了。