vue 追加下拉框,三级联动

例图。结构比较复杂。三级联动的这种。这个是添加页面的。

<template>
  <div>
    <el-form label-width="100px">
      <el-form-item label="车型：" v-for="(item,index) in fartherList" :key="index">
        <el-col :span="2">
          <el-select
            class="el-select"
            v-model="form.FartherList[index]"
            size="mini"
            @change="updateSystem(index,form.FartherList[index])"
          >
            <el-option
              v-for="items in Cartype"
              :key="items.p_pinpai"
              :label="item.p_pinpai"
              :value="items.p_pinpai"
            ></el-option>
          </el-select>
        </el-col>
        <el-col :span="2">
          <el-select
            class="el-select"
            v-model="form.secondList[index]"
            @change="updateName(index,form.secondList[index])"
            size="mini"
          >
            <el-option
              v-for="(secondItem,keyss) in secondList.data[index]"
              :key="keyss"
              :label="secondItem.p_chexi"
              :value="secondItem.p_chexi_id"
            ></el-option>
          </el-select>
        </el-col>
        <el-col :span="2">
          <el-select
            class="el-select"
            v-model="form.thirdList[index]"
            size="mini"
            @change="Determin(thirdList.data[index],form.thirdList[index],index)"
          >
            <el-option
              v-for="(third,keys) in thirdList.data[index]"
              :key="keys"
              :label="third.p_chexingmingcheng"
              :value="third.p_chexing_id"
            ></el-option>
          </el-select>
        </el-col>
        <i class="el-icon-circle-plus" @click="Addingmodels"></i>
        <i class="el-icon-remove" @click="deleteItem(index)" v-if="index>=1"></i>
      </el-form-item>
      <!-- 添加多组车型 -->
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      Cartype: [],
      form: {
        FartherList: [],
        secondList: [],
        thirdList: []
      },
      secondList: {
        data: []
      },
      thirdList: {
        data: []
      },
      Car: {
        cartype: "",
        carsystem: "",
        carname: "",
        content: [],
        text: []
      },
      submit: [],
      fartherList: [
        {
          cartype: "",
          carsystem: "",
          carname: "",
          content: [],
          text: []
        }
      ],
      Obj: {}
    };
  },

  created() {
    this.Obj = JSON.parse(sessionStorage.getItem("order_no"));
    this.getData();
    this.getCartype();
  },
  methods: {
    // 获取手机端已选择的车型数据
    async getData() {
      const { data: res } = await this.$ajax.get(
        "/v2/order/order-info?order_no=" + this.Obj.no
      );
      if (res.code == 0) {
        // 打印手机端，返回的数组，
        console.log(res.data.vehicle_type);
      }
    },
    // 获取车型
    async getCartype() {
      const { data: res } = await this.$ajax.post("/v2/vehicle-management/get");
      if (res.code == 0) {
        this.Cartype = res.data;
      }
    },
    // 获取车系
    updateSystem(i, value) {
      this.form.secondList[i] = "";
      this.secondList.data[i] = "";
      this.form.thirdList[i] = "";
      this.Cartype.forEach((item, index) => {
        if (item.p_pinpai == value) {
          this.secondList.data[i] = item.son;
        }
      });
    },
    // 获取车型名称
    async updateName(index, value) {
      this.form.thirdList[index] = "";
      const { data: res } = await this.$ajax.post(
        "/v2/vehicle-management/get-type",
        {
          p_chexi_id: value
        }
      );
      if (res.code == 0) {
        this.$set(this.thirdList.data, index, res.data);
      }
    },
    // 添加多组车型
    Addingmodels() {
      this.fartherList.push(this.Car);
    },
    // 删除车型
    deleteItem(index) {
      this.form.FartherList.splice(index, 1);
      this.form.secondList.splice(index, 1);
      this.form.thirdList.splice(index, 1);
      this.secondList.data.splice(index, 1);
      this.thirdList.data.splice(index, 1);
      this.fartherList.splice(index, 1);
      this.submit.splice(index, 1);
    },

    Determin(value, value1, indexd) {
      value.forEach((item, index) => {
        if (item.p_chexing_id == value1) {
          this.submit[indexd] = item;
        }
      });
      console.log(this.submit);
      // 此处就是最后的值
      this.$store.commit("addTocar", this.submit[0]);
    }
  }
};
</script>
<style lang="scss" scoped>
.el-alert {
  margin-bottom: 10px;
}
.el-select {
  width: 100%;
  margin-right: 2px;
}
.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 100% !important;
}
.el-row {
  .el-col {
    line-height: 35px;
    font-size: 14px;
  }
  .el-col:nth-child(1) {
    text-align: right;
  }
}
.Aprice {
  color: red;
}
i {
  font-size: 16px;
  margin-right: 5px;
  cursor: pointer;
}
</style>