共计 744 个字符，预计需要花费 2 分钟才能阅读完成。
关于 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 取值问题。