關於element ui中el-cascader的使用方式

Posted on by

element ui中el-cascader使用

要想實現進入頁面直接選中選擇器中的選項

例→

那v-model綁定的值必須是數組形式的！！（element ui官方文檔中沒提到這一點好像，我也是試瞭很多次才發現的）

代碼

        <el-form-item label="分類:" prop="region" class="region">
          <div class="block">
            <el-cascader
              v-model="optionProps" //**重點**
              :options="myOptions2"
              :props="{ checkStrictly: true }"
              @change="handleChange"
            ></el-cascader>
          </div>
        </el-form-item>

element中el-cascader使用及自定義key名

下面展示一些 內聯代碼片。

el-cascader的通過改變值時，獲取當前選中數據

根據接口返回數據，靈活定義key名

// template中的應用 options為數據 
// 1.props="optionProps"：props是框架屬性，optionProps為自定義data中的key
//2. ref="cascaderAddr" 自定義 用來 @change事件取值用
		<template>
			<el-cascader
              v-model="ruleForm.address"
              :options="options"
              :props="optionProps"
              clearable
              ref="cascaderAddr"
              @change="cascaderChange"
            ></el-cascader>
        </template>

//定義符合自己數據的key值
<script>
data() {
    return {
      optionProps: {
        value: "code",
        label: "name",
        children: "children",
      },
     }
    },
methods: {
 cascaderChange() {
      console.log(
        this.$refs["cascaderAddr"].getCheckedNodes()[0].pathLabels,
        "選擇地址"
      );
      // this.$refs["cascaderAddr"].getCheckedNodes()//完整的數據
      //this.$refs["cascaderAddr"].getCheckedNodes()[0].pathLabels//value的值
    },
}
</script>

以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。

推薦閱讀：