el-cascader选择省市区单个选择

最新推荐文章于 2025-04-01 15:21:51 发布

曲小强

最新推荐文章于 2025-04-01 15:21:51 发布

阅读量454

点赞数 1

分类专栏： Vue.js 文章标签：前端 css html

本文链接：https://blog.csdn.net/quhongqiang/article/details/130412666

版权

Vue.js 专栏收录该内容

50 篇文章

订阅专栏

该文章展示了如何在Vue.js应用中使用el-cascader组件，通过ref进行引用，change事件处理数据变化，v-model绑定选择的值，并配置propsData以自定义显示和值的属性。示例中，用户选择的省市区信息会更新到params.address。

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

<el-cascader ref="selectRef" @change="handleChangeCasca" v-model="params.address" :props="propsData" :options="data.options" placeholder="请选择省市区"/>

	const propsData = reactive({
        checkStrictly: true,
        label: 'name',
        value: 'code',
        children: 'childer',
    });
    const selectRef = ref<any>();
    // 当选择的数据发生变化时
    const handleChangeCasca = (value: any) => {
        params.address = value;
    };