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

目录

• element ui中el-cascader使用
• 例→
• 代码
• element中el-cascader使用及自定义key名

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>
			

以上为个人经验，希望能给大家一个参考，也希望大家多多支持。