如何实现三级联动选择，且如何没有三级时，只显示两个选择框

三级联动.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>

关于表单验证的部分，可以在表单验证的地方进行详细书名，此处就不做赘述，这个地方主要就是使用了三个下拉选择框；
在三级选择框的后面可以看到使用了 v-if="cityData.length" 这个地方使用这个的原因就是因为后端给的数据像一些特殊地区，比如台湾、香港等地是没有三级选择的，没有三级选择，那么就需要将这个框隐藏，同时验证也要通过。
我在做的时候，由于当时看到了后端的数据格式，所以这个地方判断的时候使用的是v-if = "form.selectResult[0]!='1'"，因为当时给的数据是这样的

一级选择数据.png

表单验证.png

2.js部分

<script>
export default {
  data() {
    return {
      type: "manage",
      editObj: {},
      title: "管理常用登录地",
      visible: false,
      modalVisible: false,
      confirmLoading: false,
      treeData: [],
      form: {
        selectResult: []
      },
       //验证规则
      rules: {
        selectResult: {
          "0": [{ required: true, message: "请选择区域", trigger: "change" }],
          "1": [{ required: true, message: "请选择省", trigger: "change" }],
          "2": [{ required: true, message: "请选择市", trigger: "change" }]
        },
        log_server: [
          { required: true, message: "请添加服务器", trigger: "change" }
        ]
      },
      regionChina: [],
      provinceData: [],
      cityData: []
    };
  },
  created() {
    this.getFirstData();
  },
  methods: {
    /*===== 获得大地区数据 =====*/
    getFirstData() {
        this.regionChina = result.list || [];
    },
    /*===== 获得省级城市数据 =====*/
    getSecondData() {
        this.provinceData = result.list || []；
    },
    /*===== 获得市级城市数据 =====*/
    getThirdData() {
         this.cityData = result.list || [];//请求接口得到，此处未展示请求接口部分的代码；
    },
    /*===== 省市区三级联动 =====*/
    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的内容清空哟_{（互联网是有记忆的，有的时候清空也是不行的哟}所以，网络事实切勿轻易站队）