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

原创于 2023-04-27 18:26:51 发布 · 459 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #css #html

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;
    };