Vue使用Cascader级联选择器数据回显

最新推荐文章于 2025-05-15 16:22:45 发布

爱写程序的小高

最新推荐文章于 2025-05-15 16:22:45 发布

阅读量8.1k

点赞数 8

CC 4.0 BY-SA版权

分类专栏： vue js 文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/qq_38801090/article/details/122357046

vue 同时被 2 个专栏收录

15 篇文章

订阅专栏

13 篇文章

订阅专栏

本文介绍了如何在Vue中使用el-cascader组件进行数据绑定，并通过配置v-model和:props实现数据回显。示例展示了如何设置multiple、emitPath、collapse-tags等属性，以及在js中处理configForm和options数据，实现选中值与选项的对应。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.组件部分

注意：v-model（选中项绑定值），:props="{emitPath:false }"（在选中节点改变时，是否返回由该节点所在的各级菜单的值所组成的数组，若设置 false，则只返回该节点的值）

<el-cascader
    style="width:270px;margin-right:20px;"
    size="mini"
    ref="cascader"
    placeholder="请选择"
    v-model="configForm"
    :options="options"
    :props="{ multiple: true,emitPath:false}"
    collapse-tags
    :show-all-levels="false"
    filterable
    clearable>
</el-cascader>

2.js部分

注意：configForm取值为options 该节点的value

configForm:["yizhi","fankui","xiaolv","kekong"],
options: [{
          value: 'zhinan',
          label: '指南',
          children: [{
            value: 'shejiyuanze',
            label: '设计原则',
            children: [{
              value: 'yizhi',
              label: '一致'
            }, {
              value: 'fankui',
              label: '反馈'
            }, {
              value: 'xiaolv',
              label: '效率'
            }, {
              value: 'kekong',
              label: '可控'
            }]
          }, {
            value: 'daohang',
            label: '导航',
            children: [{
              value: 'cexiangdaohang',
              label: '侧向导航'
            }, {
              value: 'dingbudaohang',
              label: '顶部导航'
            }]
          }]
        }, {
          value: 'zujian',
          label: '组件',
        }, {
          value: 'ziyuan',
          label: '资源', 
        }]