如何實現(xiàn)三級聯(lián)動選擇，且如何沒有三級時肉微，只顯示兩個選擇框

三級聯(lián)動.png

1.html部分旗闽，帶表單驗證

<a-form-model-item
          v-if="!visible"
          label="請選擇要添加的常用登錄地"
          style="margin-bottom: 0;"
          required
        >
          <div style="display: flex;">
            <!-- 一級選擇 -->
            <a-form-model-item prop="selectResult[0]">
              <a-select
                style="width: 120px"
                :value="form.selectResult[0]"
                @change="handleChinaChange"
                placeholder="請選擇"
              >
                <a-select-option
                  v-for="region in regionChina"
                  :value="region.dis_code"
                  :key="region.dis_code"
                  >{{ region.district_name }}</a-select-option
                >
              </a-select>
            </a-form-model-item>
            <!-- 二級選擇 -->
            <a-form-model-item prop="selectResult[1]">
              <a-select
                style="width: 120px"
                placeholder="請選擇"
                :value="form.selectResult[1]"
                @change="handleProvinceChange"
              >
                <a-select-option
                  v-for="province in provinceData"
                  :value="province.dis_code"
                  :key="province.dis_code"
                  >{{ province.district_name }}</a-select-option
                >
              </a-select>
            </a-form-model-item>
            <!-- 三級選擇 -->
            <a-form-model-item prop="selectResult[2]" v-if="cityData.length">
              <a-select
                style="width: 120px"
                placeholder="請選擇"
                :value="form.selectResult[2]"
                @change="handleCityChange"
              >
                <a-select-option
                  v-for="city in cityData"
                  :value="city.dis_code"
                  :key="city.dis_code"
                >
                  {{ city.district_name }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </div>
        </a-form-model-item>

關(guān)于表單驗證的部分酬核，可以在表單驗證的地方進行詳細書名，此處就不做贅述适室，這個地方主要就是使用了三個下拉選擇框嫡意；
在三級選擇框的后面可以看到使用了 v-if="cityData.length" 這個地方使用這個的原因就是因為后端給的數(shù)據(jù)像一些特殊地區(qū)，比如臺灣捣辆、香港等地是沒有三級選擇的蔬螟，沒有三級選擇，那么就需要將這個框隱藏汽畴，同時驗證也要通過旧巾。
我在做的時候耸序，由于當(dāng)時看到了后端的數(shù)據(jù)格式，所以這個地方判斷的時候使用的是v-if = "form.selectResult[0]!='1'"鲁猩，因為當(dāng)時給的數(shù)據(jù)是這樣的

一級選擇數(shù)據(jù).png

表單驗證.png

2.js部分

<script>
export default {
  data() {
    return {
      type: "manage",
      editObj: {},
      title: "管理常用登錄地",
      visible: false,
      modalVisible: false,
      confirmLoading: false,
      treeData: [],
      form: {
        selectResult: []
      },
       //驗證規(guī)則
      rules: {
        selectResult: {
          "0": [{ required: true, message: "請選擇區(qū)域", trigger: "change" }],
          "1": [{ required: true, message: "請選擇省", trigger: "change" }],
          "2": [{ required: true, message: "請選擇市", trigger: "change" }]
        },
        log_server: [
          { required: true, message: "請?zhí)砑臃?wù)器", trigger: "change" }
        ]
      },
      regionChina: [],
      provinceData: [],
      cityData: []
    };
  },
  created() {
    this.getFirstData();
  },
  methods: {
    /*===== 獲得大地區(qū)數(shù)據(jù) =====*/
    getFirstData() {
        this.regionChina = result.list || [];
    },
    /*===== 獲得省級城市數(shù)據(jù) =====*/
    getSecondData() {
        this.provinceData = result.list || []沐飘；
    },
    /*===== 獲得市級城市數(shù)據(jù) =====*/
    getThirdData() {
         this.cityData = result.list || [];//請求接口得到，此處未展示請求接口部分的代碼牲迫；
    },
    /*===== 省市區(qū)三級聯(lián)動 =====*/
    handleChinaChange(value) {
      this.provinceData = [];
      this.cityData = [];
      this.form.selectResult.length = 0;
      this.form.selectResult.push(value);
      this.getSecondData();
    },
    handleProvinceChange(value) {
      this.cityData = [];
      this.form.selectResult.length = 1;
      this.form.selectResult.push(value);
      this.getThirdData();
    },
    handleCityChange(value) {
      this.form.selectResult.length = 2;
      this.form.selectResult.push(value);
    },
    /*=====取消操作=====*/
    handleCancel() {
      this.$refs.ruleForm.clearValidate();
      this.provinceData = [];
      this.cityData = [];
      let { modalVisible, form } = this.$options.data();
      Object.assign(this.$data, { modalVisible, form });
    }
  }
};
</script>

這里值得注意的是在取消的時候要將provinceData和cityData的內(nèi)容清空喲_{（互聯(lián)網(wǎng)是有記憶的耐朴，有的時候清空也是不行的喲}所以，網(wǎng)絡(luò)事實切勿輕易站隊）