乐趣区

element-ui中cascader同时获取label和value值

关于 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 取值问题。

退出移动版