Area 省市区选择

type : 'area'

区域选择组件

代码演示

基础用法

area 默认数据使用了@vant/area-data 数据

<template>
    <x-form ref="formRef" label-align="top" :model="formValue" :items="formOptions" />
</template>

<script lang="ts" setup>
import { ref } from 'vue';
const formRef = ref();
const formValue = ref({
});
const formOptions = ref([
     {
        type: 'area',
        label: '省市区',
        name: 'area1',
        placeholder: '请输入内容',
        required: true,
        attrs: {
            'columns-num': 3
        }
    },
    {
        type: 'area',
        label: '省市',
        name: 'area2',
        placeholder: '请输入内容',
        required: true,
        attrs: {
            'columns-num': 2
        }
    },
    {
        type: 'area',
        label: '省',
        name: 'area3',
        placeholder: '请输入内容',
        required: true,
        attrs: {
            'columns-num': 1
        }
    },
]);
</script>
<style lang="scss" scoped></style>

基础用法

API

Props

与官方组件 Area 省市区选择 参数保持一致，这里以展示新增属性配置为主，具体配置参见官方文档。