zoukankan      html  css  js  c++  java
  • 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取值问题。

  • 相关阅读:
    Android--多线程之Handler
    Android--Service之基础
    Android--UI之Fragment
    Android--多线程之图文混排
    python常用模块
    python应用之socket编程
    网络编程socket理论一
    pycharm Launching unittests with arguments
    python字符串格式化
    python数据类型之三
  • 原文地址:https://www.cnblogs.com/twodog/p/12135609.html
Copyright © 2011-2022 走看看