關於elementUI中cascader選中值后,能獲取value或者label,但不能同時獲value和label,這一問題,琢磨出了這么個辦法。
以新增和編輯城市為例,type: 1 編輯,type: 0 新增
1. 配置元素
<el-cascader filterable
:class="{'city-cascader': type==1}"
:placeholder="city || '請選擇'"
:options="cityLists"
:props="cityProps"
v-model="citySelected"
style="width:300px;"
:show-all-levels="false"
@change="changeCity" >
</el-cascader>
2. 配置cityProps
cityProps: {value: 'all', label: 'label'}
3. 組裝props中的all
// cityLists中遍歷組裝all
all: {
value: value,
label: label
}
4. 使用
此時,點擊cascader選擇需要的內容后,
取出來的citySelected值就是[{value: 選中值的value, label: 選中值的label}]
這個方法可以通過配置all獲取任意自己想要的值。
PS: 關於拿不到默認值的問題,我投機取巧的使用了placeholder。
:placeholder="city || '請選擇'"
然后在cascader上加上樣式:
:class="{'city-cascader': type==1}"
.city-cascader .el-input__inner::placeholder {
color: #333 !important;
}
ok,完美解決cascader取值問題。