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

本文介绍如何在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]

 

### Element UI Cascader 实现两级联动 要在 **Element UI** 中通过 `el-cascader` 组件实现两级联动功能,可以按照以下方法完成。以下是详细的说明以及代码示例。 #### 1. 数据准备 为了实现省市级别的两级联动,需要准备好对应的地区数据结构。可以通过第三方库 `element-china-area-data` 获取标准的中国行政区划数据[^3]。 ```javascript import { provinceAndCityData } from 'element-china-area-data'; ``` 此库提供了简化版的数据集,其中只包含省份和城市的两级关系。 --- #### 2. 页面组件配置 在模板部分定义 `el-cascader` 组件,并绑定其属性: - `v-model`: 双向绑定当前选中的值。 - `:options`: 设置区域数据源。 - `@change`: 定义当用户选择变化时触发的方法。 ```html <template> <div id="app"> <!-- el-cascader 配置 --> <el-cascader size="large" :options="options" v-model="selectedOptions" @change="handleChange" > </el-cascader> </div> </template> ``` --- #### 3. 脚本逻辑编写 在脚本部分初始化数据并处理回调函数。 - 初始化 `data()` 方法中设置默认值为空数组。 - 在 `methods` 中定义 `handleChange` 函数用于捕获用户的操作行为。 ```javascript <script> // 导入地区数据 import { provinceAndCityData } from 'element-china-area-data'; export default { data() { return { // 地区数据 options: provinceAndCityData, // 当前选中的值 selectedOptions: [] }; }, methods: { handleChange(value) { console.log('已选择:', value); } } }; </script> ``` 上述代码实现了基于 `provinceAndCityData` 的两级联动效果。 --- #### 4. 样式调整(可选) 如果希望进一步优化样式,可以在 `<style>` 块中自定义 CSS 或者使用 Element 提供的主题变量来适配设计需求。 ```css <style scoped> /* 自定义样式 */ .select { width: 300px; } </style> ``` --- ### 注意事项 - 如果仅需展示两级联动,则无需额外修改 `expandTrigger` 属性,默认为点击展开即可满足需求。 - 若项目中有国际化或其他特殊场景的需求,可根据实际业务扩展数据模型或重写渲染逻辑。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值