element-ui el-cascader 级联选择器联动默认值

最新推荐文章于 2025-06-16 17:51:37 发布

原创最新推荐文章于 2025-06-16 17:51:37 发布 · 1.7w 阅读

16 ·

CC 4.0 BY-SA版权

vue 同时被 2 个专栏收录

14 篇文章

订阅专栏

element-ui

9 篇文章

订阅专栏

本文介绍如何在Element UI的el-cascader组件中根据后台返回的数据设置默认显示值，通过代码示例展示了如何正确配置级联选择器的属性和数据，以实现预设选项的展示。

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

在使用 element-ui 的 el-cascader 组件根据后台返回的数据，需要展示一个默认值，官网给出的例子https://element.eleme.cn/2.0/#/zh-CN/component/cascader 借鉴了一下，话不多说直接上代码：

效果图：

代码块：

<template>
    <div class="block">
        <span class="demonstration">默认 click 触发子菜单</span>
        <el-cascader
            :props="defaultParams"
            :options="options"
            v-model="selectedOptions">
        </el-cascader>
    </div>
</template>
<script>
export default {
    data () {
        return {
            options: [],
            selectedOptions: ['1', '4'],
            defaultParams: {
                label: 'name',
                value: 'id',
                children: 'sub'
            },
        }
    },
    create () {
        // 这里是接口返回的数据
        let options = {
            "data": [{
                "id": "1",
                "name": "水果",
                "level": "1",
                "pid": "0",
                "status": "1",
                "sub": [{
                    "id": "4",
                    "name": "苹果",
                    "level": "2",
                    "pid": "1",
                    "status": "1"
                }, {
                    "id": "8",
                    "name": "香蕉",
                    "level": "2",
                    "pid": "1",
                    "status": "1"
                }]
            }, {
                "id": "2",
                "name": "食品",
                "level": "1",
                "pid": "0",
                "status": "1",
                "sub": [{
                    "id": "5",
                    "name": "馒头",
                    "level": "2",
                    "pid": "2",
                    "status": "1"
                }, {
                    "id": "6",
                    "name": "大米",
                    "level": "2",
                    "pid": "2",
                    "status": "1"
                }]
            }]
        }
        this.options = options.data
    }
}
</script>

到这里基本上算是完成了。

注意：如果说后端返回的 id 是 String 类型，这里的默认值也是 String：selectedOptions: ['1', '4']，如果返回的是 Number 类型，默认值 selectedOptions: [1, 4]