多级联动

多个选择框分级联动

普通用法

多级联动 - 图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>