1. 程式人生 > >element-ui中cascader同時獲取label和value值

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取值問題。