Vue3+element-plus的el-cascader级联选择器组件实现多级选择、级联选择、表单多级单选、表单多级多选，el-cascader获取value值

实现效果：

能够实现表单下拉的多级选择，并且能够获取当前选项的value值，例如：在表单选择信息时多级选择：中国-陕西-西安，汽车-小米-小米su7这样的多级分类；

下方效果我以模型类别为一个示例，以这个示例代码进行解释

 

 关键代码：

下述代码都在一个Vue组件中，分别从template模块、script模块进行解释说明

template模块：

          <el-cascader
            class="normal"
            v-model="form.checkedType"
            :show-all-levels="false"
            :teleported="false"
            :options="form.numberType"
            :props="{ expandTrigger: 'hover' }"
            placeholder="选择数据类型"
            size="large"
            @change="handleChange"
          />

           // 之前用el-select实现的一级选择框
          <!-- 
          <el-select
            class="normal"
            v-model="form.checkedType"
            :teleported="false"
            placeholder="选择数据类型"
          >
            <el-option
              v-for="item in form.numberType"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select> 
          -->

• form.checkedType：存储模型类型的字段
• form.numberType：存储模型数据的数组
• 其他都是element-plus中的属性值
  • :show-all-levels="false"表示只显示叶子名称，不显示全目录
  • :teleported="false"表示不将该下拉框添加到body中
  •  :props="{ expandTrigger: 'hover' }"表示触发类型为鼠标悬停触发

  • :options=后跟绑定的数据数组

---

script模块：

响应式的json数据：

const form = reactive({
  checkedType: '',
  numberType: [
    {
      value: 'Three模型',
      label: 'Three模型',
      children: [
        {
          value: '3D模型1',
          label: '3D模型11',
          children: [
            {
              value: '3D模型2',
              label: '3D模型22',
              children: [
                {
                  value: '3D模型3',
                  label: '3D模型33'
                }
              ]
            },
            {
              value: '3D模型4',
              label: '3D模型44'
            }
          ]
        }
      ]
    },
    {
      value: '模型类别2',
      label: '模型类别22',
      children: [
        {
          value: '模型类别21',
          label: '模型类别211',
          children: [
            {
              value: '模型类别22',
              label: '模型类别221',
              children: [
                {
                  value: '模型类别23',
                  label: '模型类别231'
                }
              ]
            }
          ]
        }
      ]
    },
    {
      value: '模型类别3',
      label: '模型类别33'
    },
    {
      value: '模型类别4',
      label: '模型类别44'
    },
    {
      value: '模型类别5',
      label: '模型类别55'
    }
  ]
})

•  这种数据结构都是类似tree的形式，每一个节点有自己的value、label，同时也可以有children孩子节点
• checkdType存储选中的value属性，用v-model="form.checkedType"绑定el-cascader标签
• numberType的值单相绑定el-cascader标签的options属性，:options=form.numberType

 handleChange函数：

const handleChange = (value) => {
  // value 是选中节点的 value 数组
  formData.checkedNumType = value[value.length - 1] // 存储最后一个选中的节点的 value
  console.info('选中的 value 数组:', value)
  console.info('选中的模型类型为:', formData.checkedNumType)
}

value结构如下：

复制object如下，可以看到是一个数组，上面的Hanler（监视器）和IsRevoked（实体是否销毁）都是隐藏的属性，所有我们可以看成是只有Target（目标），可以看成value = 这个数组；

其实从这里可以看出来Vue3实现响应式的原理就是es6的Proxy模式，这也是Vue3的一大更新以及和Vue2的主要区别之一，Vue2是通过Object.defineProperty 是 JavaScript 中的一个方法。

[
    "模型类别2",
    "模型类别21",
    "模型类别22",
    "模型类别23"
]

 上述详细问题可以访问我的个人博客RunPiboss的个人博客查看详情，欢迎前往我的个人博客

相关链接及推荐

• element-plus官网
•  关于vue使用el-cascader获取值的问题【超详细】
• 我的个人博客https://lxpstar.top/
• 5分钟搭建属于你个人的chatgpt网站，申请内测API-key，chatgpthttps://blog.csdn.net/qq_62465320/article/details/135250853?spm=1001.2014.3001.5502