vue2级连动下拉框，及其加载按钮

实现一个二级下拉框，第二个下拉框随第一个下拉框的值改变，而动态改变。并实现，一个加载按钮，点击后切换到，其他数据源。
下面附上代码：

<template>
  <div class="screen-container">
    <header class="screen-header">
      <div class="title-right">
        <img v-bind:src=shebeitiaoshikuang class="sbtsk" alt="">
        <img v-bind:src=guanliyuan class="gly" alt="">
        <img v-bind:src=jiancepingtai class="jcpt" alt="" @click="gotolink">
      </div>
    </header>
    <div class="shijian">
      <div class="jutishijian"></div>
      <BeiJingTime></BeiJingTime>
    </div>
    <div class="data-select">
      <el-form ref="form" :model="form">
        <div class="main1system">
          <el-form-item label="站点">
            <el-select v-model="form.Site" placeholder="请选择" @change="changeSelect"
                       style="width: 100px; height:30px">
              <el-option
                v-for="(item,index) in brandOptions"
                :key="index"
                :label="item"
                :value="item"
              />
            </el-select>
          </el-form-item>
        </div>
        <div class="main2system">
          <el-form-item label="系统">
            <el-select v-model="form.SiteType" placeholder="请选择" @change="URLSelect" style="width: 100px; height:30px">
              <el-option
                v-for="(item,index) in typeOptions"
                :key="index"
                :label="item"
                :value="item"
              />
            </el-select>
          </el-form-item>
        </div>
      </el-form>
      <div class="data-load">
        <el-row>
          <el-button type="primary" @click="gotoload">加载</el-button>
        </el-row>
      </div>
    </div>
    <div class="screen-body" ref="line1">
      <section class="screen-middle">
      </section>
      <section class="screen-middle2">
      </section>
      <section class="screen-middle3">
      </section>
      <section class="screen-middle4">
      </section>
    </div>
  </div>
</template>

<script>
import BeiJingTime from '@/components/zujian/BeiJingTime'

export default {
  components: {
    BeiJingTime
  },
  data () {
    return {
      newDate: new Date(),
      jiancepingtai: require('../../../../public/static/img/title/jiancepingtai.png'),
      guanliyuan: require('../../../../public/static/img/title/管理员 拷贝.png'),
      shebeitiaoshikuang: require('../../../../public/static/img/title/设备调试框 拷贝 2.png'),
      brandOptions: ['兰州', '南京', '成都', '武汉'],
      brandObj: {
        兰州: ['兰州站GPS', '兰州站GLONASS'],
        南京: ['南京站GPS', '南京GLONASS'],
        成都: ['成都站GPS', '成都站GLONASS'],
        武汉: ['武汉站GPS', '武汉站GLONASS']
      },
      typeOptions: [],
      form: {
        Site: '',
        SiteType: ''
      },
      CURl: null,
      alldata1: null,
      alldata2: null
    }
  },
  mounted () {
    this.crouter()
  },
  methods: {
    crouter () {
      console.log(this.$route.path)

      if (this.$route.path === '/lzgps2') {
        this.form.Site = '兰州'
        this.form.SiteType = this.brandObj.兰州[0]
        this.typeOptions = this.brandObj[this.form.Site]
      }
      if (this.$route.path === '/lzglonass') {
        this.form.Site = '兰州'
        this.form.SiteType = this.brandObj.兰州[1]
        this.typeOptions = this.brandObj[this.form.Site]
      }
      if (this.$route.path === '/njgps2') {
        this.form.Site = '南京'
        this.form.SiteType = this.brandObj.南京[0]
        this.typeOptions = this.brandObj[this.form.Site]
      }
      if (this.$route.path === '/njglonass') {
        this.form.Site = '南京'
        this.form.SiteType = this.brandObj.南京[1]
        this.typeOptions = this.brandObj[this.form.Site]
      }
      if (this.$route.path === '/cdgps2') {
        this.form.Site = '成都'
        this.form.SiteType = this.brandObj.成都[0]
        this.typeOptions = this.brandObj[this.form.Site]
        // this.form.SiteType = '成都站GPS'
        // this.typeOptions = ['成都gps', '成都glonass']
      }
      if (this.$route.path === '/cdglonass') {
        this.form.Site = '成都'
        this.form.SiteType = this.brandObj.成都[1]
        this.typeOptions = this.brandObj[this.form.Site]
      }
      if (this.$route.path === '/whgps2') {
        this.form.Site = '武汉'
        this.form.SiteType = this.brandObj.武汉[0]
        this.typeOptions = this.brandObj[this.form.Site]
      }
      if (this.$route.path === '/whglonass') {
        this.form.Site = '武汉'
        this.form.SiteType = this.brandObj.武汉[1]
        this.typeOptions = this.brandObj[this.form.Site]
      }
    },
    gotolink () {
      // 点击跳转至上次浏览页面
      // this.$router.go(-1)
      // 指定跳转地址
      this.$router.replace('/')
    },
    changeSelect () {
      // 清空手机型号内容
      this.form.SiteType = ''
      console.log(this.form.Site)
      // 遍历手机品牌的下拉选项数组
      for (const k in this.brandOptions) {
        // 手机品牌内容 是否等于 手机品牌的下拉选择数组中的某一项
        if (this.form.Site === this.brandOptions[k]) {
          this.typeOptions = this.brandObj[this.form.Site]
          console.log(this.typeOptions)
        }
      }
    },
    URLSelect () {
      if (this.form.Site === '兰州' && this.form.SiteType === '兰州站GPS') {
      }
      if (this.form.Site === '兰州' && this.form.SiteType === '兰州站GLONASS') {
      }
      if (this.form.Site === '南京' && this.form.SiteType === '南京站GPS') {
      }
      if (this.form.Site === '南京' && this.form.SiteType === '南京站GLONASS') {
      }
      if (this.form.Site === '成都' && this.form.SiteType === '成都站GPS') {
      }
      if (this.form.Site === '成都' && this.form.SiteType === '成都站GLONASS') {
      }
      if (this.form.Site === '武汉' && this.form.SiteType === '武汉站GPS') {
      }
      if (this.form.Site === '武汉' && this.form.SiteType === '武汉站GLONASS') {
      }
    },
    gotoload () {
      if (this.form.Site === '兰州' && this.form.SiteType === '兰州站GPS') {
        // this.CURl = 'data/gsdeall/gpslinecharts'
        this.$router.replace('/lzgps2')
      }
      if (this.form.Site === '兰州' && this.form.SiteType === '兰州站GLONASS') {
        this.$router.replace('/lzglonass')
      }
      if (this.form.Site === '南京' && this.form.SiteType === '南京站GPS') {
        this.$router.replace('/njgps2')
      }
      if (this.form.Site === '南京' && this.form.SiteType === '南京站GLONASS') {
        this.$router.replace('/njglonass')
      }
      if (this.form.Site === '成都' && this.form.SiteType === '成都站GPS') {
        this.$router.replace('/cdgps2')
      }
      if (this.form.Site === '成都' && this.form.SiteType === '成都站GLONASS') {
        this.$router.replace('/cdglonass')
      }
      if (this.form.Site === '武汉' && this.form.SiteType === '武汉站GPS') {
        this.$router.replace('/whgps2')
      }
      if (this.form.Site === '武汉' && this.form.SiteType === '武汉站GLONASS') {
        this.$router.replace('/whglonass')
      }
    },
    async getData () {
      // http://127.0.0.1:8888/api/seller
      // 请求了基准路径所以只需要，将api之后的路径写出来即可
      const { data: ret } = await this.$http.get(this.CURl)
      console.log(ret)
    }
  }
}
</script>
<style lang="less" scoped>
.screen-container {
  position: absolute;
  background: url('../../../../public/static/img/elsebeijing/gongshimain.png') no-repeat;
  width: 1920px;
  height: 1080px;
  color: #fff;
  box-sizing: border-box;
}

.screen-header {
  width: 100%;
  height: 64px;
  font-size: 20px;
  position: absolute;

  .sbtsk {
    display: flex;
    align-items: center;
    position: absolute;
    right: 0px;
    top: 50%;
    left: 87%;
    transform: translateY(-30%);
    margin-right: 6%;
  }

  .gly {
    display: flex;
    align-items: center;
    position: absolute;
    right: 0;
    top: 50%;
    margin-right: 1%;
    left: 90%;
    transform: translateY(-40%);
  }

  .jcpt {
    display: flex;
    align-items: center;
    position: absolute;
    right: 0;
    top: 50%;
    margin-right: 1%;
    left: 806px;
    transform: translateY(-40%);
  }

  .title {
    position: absolute;
    left: 50%;
    top: 50%;
    font-size: 20px;
    transform: translate(-50%, -50%);
  }

  .datetime {
    font-size: 15px;
    margin-left: 10px;
  }

}

.shijian {
  display: flex;
  width: 1920px;
  height: 7%;
  bottom: 84%;
  position: absolute;

  .lz {
    position: absolute;
    left: 9%;
    top: 50%;
    font-size: 20px;
    transform: translate(-50%, -50%);
  }

  .xqsj {
    position: absolute;
    left: 90%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  .jutishijian {
    position: absolute;
    font-size: 30px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}

.data-select {
  padding: 0;
  margin: 0;
  width: 1920px;
  height: 70px;
  top: 180px;
  // border: aqua solid 1px;
  position: absolute;

  .system2 {
    padding: 0;
    margin: 0;
    top: -60px;
    position: absolute;
    width: 100px;
    left: 500px;
  }

  .main1system {
    padding: 0;
    margin: 0;
    top: 15px;
    position: absolute;
    width: 100%;
    left: 200px;
  }

  .main2system {
    padding: 0;
    margin: 0;
    top: 15px;
    position: absolute;
    width: 150px;
    left: 600px;
  }

  .data-load {
    padding: 0;
    margin: 0;
    top: 15px;
    position: absolute;
    width: 150px;
    left: 900px;
  }

}

.screen-body {
  width: 100%;
  height: 78%;
  bottom: 3%;
  position: absolute;

  .screen-middle {
    border: aqua solid 1px;
    height: 20%;
    width: 93%;
    left: 2%;
    top: 6%;
    margin-left: 1.6%;
    margin-right: 1.6%;
    position: absolute;
  }

  .screen-middle2 {
    border: aqua solid 1px;
    height: 20%;
    width: 93%;
    left: 2%;
    top: 30.5%;
    margin-left: 1.6%;
    margin-right: 1.6%;
    position: absolute;
  }

  .screen-middle3 {
    border: aqua solid 1px;
    height: 20%;
    width: 93%;
    left: 2%;
    top: 55%;
    margin-left: 1.6%;
    margin-right: 1.6%;
    position: absolute;
  }

  .screen-middle4 {
    border: aqua solid 1px;
    height: 20%;
    width: 93%;
    left: 2%;
    top: 80%;
    margin-left: 1.6%;
    margin-right: 1.6%;
    position: absolute;
  }
}
</style>

最后的样式

过程中遇到的难点就是，下拉框联动，需要添加一个change事件，下面附上核心代码。

 for (const k in this.brandOptions) {
        // 手机品牌内容 是否等于 手机品牌的下拉选择数组中的某一项
        if (this.form.Site === this.brandOptions[k]) {
          this.typeOptions = this.brandObj[this.form.Site]
          console.log(this.typeOptions)
        }
      }

总之，就是熟练应用 v-model js遍历，多看vue官网。