vue+ivew四级联动

欢迎批评：

html部分：

 <Form
    ref="formValidate"
    :model="formValidate"
    :rules="ruleValidate"
  >
    <FormItem
      prop="bank"
      class="bank"
    >
      <Select
        v-model="formValidate.bank"
        placeholder="请选择银行"
        @on-change="change"
       
      >
        <Option
          v-for="item in bank"
          :key="item.id"
          :value="item.id"
        >{{ item.name}}</Option>
      </Select>
    </FormItem>
    <FormItem
      prop="province"
      class="province"
    >
      <Select
        v-model="formValidate.province"
        placeholder="请选择省份"
        @on-change="change1" 
      >
        <Option
          v-for="item in provinceArr"
          :key="item.id"
          :value="item.id"
        >{{ item.name}}</Option>
      </Select>
    </FormItem>
  <div>
    <FormItem
      prop="city"
      class="city"
    >
      <Select
        v-model="formValidate.city"
        placeholder="请选择城市"
        @on-change="change2" 
      >
        <Option
          v-for="item in cities"
          :key="item.id"
          :value="item.id"
        >{{ item.name}}</Option>
      </Select>
    </FormItem>
    <FormItem
      prop="branch"
      class="branch"
    >
      <Select
        v-model="formValidate.branch"
        placeholder="请选择支行" 
      >
        <Option
          v-for="item in branch"
          :key="item.id"
          :value="item.id"
        >{{ item.name}}</Option>
      </Select>
    </FormItem>
  </div>
  </Form>

js部分：

export default {
  name: 'help',
  data() {
    return {
      bank: [
        {
          id: 1,
          name: "中国建设银行",
          provinceArr: [{
            id: 11,
            name: "北京市",
            cities: [{
              id: 111,
              name: "北京市",
              branch: [{
                id: 1111,
                name: "中国建设银行北京支行"
              }]
            }]
          }, {
            id: 12,
            name: "天津市",
            cities: [{
              id: 121,
              name: "天津市",
              branch: [{
                id: 1211,
                name: "中国建设银行天津支行"
              }]
            }]
          }]
        },
        {
          id: 2,
          name: "中国银行",
          provinceArr: [
            {
              id: 21,
              name: "北京市",
              cities: [{
                id: 211,
                name: "北京市",
                branch: [{
                  id: 2111,
                  name: "中国银行北京支行"
                }]
              }]
            },
            {
              id: 22,
              name: "天津市",
              cities: [{
                id: 221,
                name: "天津市",
                branch: [{
                  id: 2211,
                  name: "中国银行天津支行"
                }]
              }]
            }]
        }
      ],
      provinceArr: "",
      cities: "",
      branch: "",
      formValidate: {},
      ruleValidate: {}
    }
  },
  methods: {
    change(val) {
      console.log('bank----------' + val)
      for (var i = 0; i < this.bank.length; i++) {
        if (val == this.bank[i].id) {
          this.provinceArr = this.bank[i].provinceArr;
        }
      }
    },
    change1(val) {
      console.log(val)
      for (var i = 0; i < this.provinceArr.length; i++) {
        if (val == this.provinceArr[i].id) {
          this.cities = this.provinceArr[i].cities;
        }
      }
    },
     change2(val) {
      console.log(val)
      for (var i = 0; i < this.cities.length; i++) {
        if (val == this.cities[i].id) {
          this.branch = this.cities[i].branch;
        }
      }
    }
  }
}