【element中el-cascader使用及自定义key名】

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>