• 多级联动
    • 普通用法

    多级联动

    多个选择框分级联动

    普通用法

    多级联动 - 图1

    cascaderItem为需要联动的子选择框prop值， cascaderChange为是否选择上一级后，下一级自动默认选择第一个，defaultIndex可以配置默认选择第几个选项

    1. <avue-form :option="option" v-model="form" @submit="handleSubmit"></avue-form>
    2. <script>
    3. const baseUrl = 'https://cli2.avue.top/api/area'
    4. export default {
    5.   data(){
    6.     return {
    7.        form:{
    8.           province: '110000',
    9.           city: '110100',
    10.           area: '110101'
    11.        },
    12.        option:{
    13.           column: [{
    14.             label: '省份',
    15.             prop: 'province',
    16.             type: 'select',
    17.             props: {
    18.               label: 'name',
    19.               value: 'code'
    20.             },
    21.             cascaderItem: ['city', 'area'],
    22.             cascaderChange: true,
    23.             dicUrl: `${baseUrl}/getProvince`,
    24.             rules: [
    25.               {
    26.                 required: true,
    27.                 message: '请选择省份',
    28.                 trigger: 'blur'
    29.               }
    30.             ]
    31.           },
    32.           {
    33.             label: '城市',
    34.             prop: 'city',
    35.             type: 'select',
    36.             props: {
    37.               label: 'name',
    38.               value: 'code'
    39.             },
    40.             row: true,
    41.             defaultIndex: 1,
    42.             dicFlag: false,
    43.             dicUrl: `${baseUrl}/getCity/`,
    44.             rules: [
    45.               {
    46.                 required: true,
    47.                 message: '请选择城市',
    48.                 trigger: 'blur'
    49.               }
    50.             ]
    51.           },
    52.           {
    53.             label: '地区',
    54.             prop: 'area',
    55.             type: 'select',
    56.             props: {
    57.               label: 'name',
    58.               value: 'code'
    59.             },
    60.             defaultIndex: 1,
    61.             dicFlag: false,
    62.             dicUrl: `${baseUrl}/getArea/`,
    63.             rules: [
    64.               {
    65.                 required: true,
    66.                 message: '请选择地区',
    67.                 trigger: 'blur'
    68.               }
    69.             ]
    70.           }]
    71.        }
    72.     }
    73.   },
    74.   methods:{
    75.     handleSubmit(form){
    76.        this.$message.success(JSON.stringify(this.form))
    77.     }
    78.   }
    79. }
    80. </script>