级联下拉单选框的实现

需求背景

选择某个城市，所在区县与所选城市要一一对应。

开发思路

因为单选框使用的是公共组件，获取的val是“深圳市”，而不是索引，那么可以 先判断出选择的城市的索引值；由此所在区县的下拉框的数据直接由所获的索引值去取。
数据结构如下：

源代码

//公共组件里的message
  message：{
    
    
        {
    
    
          key: "city",
          label: "城市",
          placeholder: "请选择",
          type: 1,
          selects: this.cityArr,
          defaults: "",
          change: val => this.getIndex(val)//选择下拉框的值是从而确定索引
        },
        {
    
    
          key: "county",
          label: "医药机构所在区县",
          placeholder: "请选择",
          type: 1,
          defaults: "",
          noClearable: this.ifNoClearable,
          selects: this.countyArr,
          filterable: true
        },
 },
 //获取城市下拉框选项
    getCity() {
    
    
      this.cityMy = [];
      List.cityAndCounty().then(res => {
    
    
        if (res.code === 0) {
    
    
          const data = res.result || [];
          for (let i = 0; i < data.length; i++) {
    
    
            this.cityMy.push(data[i].city);
          }
          this.cityArr = this.cityMy.map(item => {
    
    
            return {
    
     label: item, value: item };
          }); //拿到的是城市的列表
          this.message.forEach(it => {
    
    
            if (it.key === "city") {
    
    
              this.$set(it, "selects", this.cityArr);
            }
          });
          this.defaultAjax += 1;
        }
      });
    },
    //获取没选城市的医药机构所在区县下拉框选项
    getCountyName() {
    
    
      List.countyName().then(res => {
    
    
        if (res.code === 0) {
    
    
          this.countyNameArr = res.result.map(item => item.county);
        }
      });
    },
    //获取选择城市的索引值
    getIndex(val) {
    
    
      const cityIndex = this.cityMy.indexOf(val);
      if (cityIndex > -1) {
    
    
        this.getCounty(cityIndex);
      }
    },
    //获取所选城市的对应医药机构所在区县下拉框
    getCounty(cityIndex) {
    
    
      ScheduleList.isHospitalArea().then(res => {
    
    
        if (res.result === "已配置医院范围") {
    
    
          this.ifNoClearable = true;
          List.cityAndCounty().then(res => {
    
    
            if (res.code === 0) {
    
    
              const data = res.result || [];
              let countyMy = [];
              countyMy =cityIndex || cityIndex === 0 ? data[cityIndex].countyList : this.countyNameArr;
              this.countyArr = countyMy.map(item => {
    
    
                return {
    
     label: item, value: item };
              });
              this.message.forEach(it => {
    
    
                if (it.key === "county") {
    
    
                  this.$set(it, "selects", this.countyArr);
                }
              });
              this.defaultAjax += 1;
            }
          });
        } else if (res.result === "未配置医院范围") {
    
    
          this.ifNoClearable = false;
          List.cityAndCounty().then(res => {
    
    
            if (res.code === 0) {
    
    
              const data = res.result || [];
              let countyMy = [];
              countyMy = cityIndex || cityIndex === 0 ? data[cityIndex].countyList : this.countyNameArr;
              this.countyArr = countyMy.map(item => {
    
    
                return {
    
     label: item, value: item };
              });
              this.message.forEach(it => {
    
    
                if (it.key === "county") {
    
    
                  this.$set(it, "selects", this.countyArr);
                }
              });
              this.defaultAjax += 1;
            }
          });
        }
      });
    },

级联下拉单选框

其实像级联下拉单选框还有一些框架就有现成的，可以参考一下这些框架。

1.elementUI:
https://element.eleme.cn/#/zh-CN/component/cascader

2. Ant Design:
   https://3x.ant.design/components/cascader-cn/