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="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取值问题。

原文地址:https://www.cnblogs.com/twodog/p/12135611.html