关于element ui中el-cascader的使用方式_vue.js

        <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>

// 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>