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

标签：完美解决   hang   cas   ade   cte   取出   important   sel   这一   

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

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

标签：完美解决   hang   cas   ade   cte   取出   important   sel   这一   

原文地址：http://blog.51cto.com/14074539/2318126