市县两个选择框联动

最新推荐文章于 2024-03-14 17:29:43 发布

saltlike

最新推荐文章于 2024-03-14 17:29:43 发布

阅读量351

点赞数

分类专栏：问题记录文章标签： vue.js elementui es6 javascript

本文链接：https://blog.csdn.net/saltlike/article/details/121139146

版权

问题记录专栏收录该内容

10 篇文章 0 订阅

订阅专栏

问题描述：

遇到一个需求，就是市和县要做成两个选择框，并保持它们数据的联动。使用vue + element ui的实现方法如下：

<template>
  <div class="app-container">
    <el-form label-position="left" ref="form" :model="form" label-width="40px">
      <el-row>
        <el-col :span="6">
          <el-form-item label="市：">
            <el-select size="small" v-model="form.cityId" clearable placeholder="请选择市" @change="handleChangeCity">
              <el-option
                v-for="item in cityDic"
                :key="item.code"
                :label="item.name"
                :value="item.code">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="县：">
            <el-select size="small" v-model="form.countyId" clearable placeholder="请选择县">
              <el-option
                v-for="item in countyDic"
                :key="item.code"
                :label="item.name"
                :value="item.code">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        cityId: '',
        countyId: ''
      },
      cityDic: [
        {
          code: '1',
          name: '郑州市'
        },
        {
          code: '2',
          name: '开封市'
        },
        {
          code: '3',
          name: '洛阳市'
        },
        {
          code: '4',
          name: '南阳市'
        }
      ],
      countyDic: []
    };
  },
  mounted() {

  },
  methods: {
    //市选中发生变化时，联动县数据事件
    handleChangeCity(value) {
      this.countyDic = [] //每次市选中发生变化就初始化县的数据
      this.form.countyId = '' //每次市选中发生变化时，就重置清空县的选中值
      if(value) {
        let cityName = this.cityDic.find(item => item.code === value).name
        for(let i = 1; i < 5; i++) {
          this.countyDic.push({
            code: i,
            name: cityName + '的县 ' + i
          })
        }
      }
    },
    //更直观一些的写法
    //市选中发生变化时，联动县数据事件
    handleChangeCityAnother(value) {
      if(value) {
        let cityName = this.cityDic.find(item => item.code === value).name
        this.countyDic = []
        for(let i = 1; i < 5; i++) {
          this.countyDic.push({
            code: i,
            name: cityName + '的县 ' + i
          })
        }
        this.form.countyId = '' 
      }else {
        this.form.countyId = ''
        this.countyDic = []
      }
    },
  },
};
</script>
<style scoped>

</style>