（前端）联动查询

a1241926991

已于 2023-06-18 22:09:57 修改

阅读量185

点赞数

文章标签： vue

于 2023-06-18 22:05:45 首次发布

本文链接：https://blog.csdn.net/a1241926991/article/details/131276613

版权

文章展示了如何在Vue.js前端应用中使用el-select组件实现省市区联动查询。通过@change事件监听用户选择，动态向后端发送请求获取下级数据，并更新页面选项。后端接收到请求后处理数据并返回，更新城市和办理中心的选择项。

摘要由CSDN通过智能技术生成

一、前端页面

<el-col :span="24">
          <el-form-item label="所在省份" prop="province">
            <el-select v-model="formData.province" placeholder="请选择所在省份" @change="provinceChange"
              @click="clearFormData('province')" clearable :style="{ width: '100%' }">
              <el-option v-for="(item, index) in province" :key="index" :label="item.label" :value="item.name"
                :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="所在城市" prop="city">
            <el-select v-model="formData.city" placeholder="请选择所在城市" @change="cityChange" @click="clearFormData('city')"
              clearable :style="{ width: '100%' }">
              <el-option v-for="(item, index) in city" :key="index" :label="item.label" :value="item.name"
                :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="办理中心" prop="center">
            <el-select v-model="formData.center" placeholder="请选择办理中心" @change="centerChange"
              @click="clearFormData('center')" clearable :style="{ width: '100%' }">
              <el-option v-for="(item, index) in center" :key="index" :label="item.label" :value="item.name"
                :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>

二、使用@change事件

使用@change事件当点击下拉框时调用方法

provinceChange() {
      this.$axios.post('/provincechange',
        this.formData
      ).then(res => {
        this.city = res.data
      })

    },

向后端发起请求

后端Controller层接受参数处理数据

@PostMapping("/provincechange")
    public  List<ResultFrom> provincechange(@RequestBody FromData fromData){
        LambdaQueryWrapper<OrderPosition> queryWrapper = new LambdaQueryWrapper<OrderPosition>();
        queryWrapper.eq(OrderPosition::getProvice, fromData.getProvince());
        List<OrderPosition> list = orderPositionService.list(queryWrapper);
        List<ResultFrom> city = list.stream().map(item -> {
            ResultFrom result = new ResultFrom();
            result.setName(item.getCity());
            return result;
        }).collect(Collectors.toList());
        return city;
    }

返回参数继续在provinceChange()方法中处理，将返回数据赋值到city数组中

在页面city下拉列表展示

<el-col :span="24">
          <el-form-item label="所在城市" prop="city">
            <el-select v-model="formData.city" placeholder="请选择所在城市" @change="cityChange" @click="clearFormData('city')"
              clearable :style="{ width: '100%' }">
              <el-option v-for="(item, index) in city" :key="index" :label="item.label" :value="item.name"
                :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>

使用@change事件当点击下拉框时调用方法

 cityChange() {
      this.$axios.post('/citychange',
        this.formData
      ).then(res => {
        this.center = res.data
      })
    },

向后端发起请求，后端Controller层接受参数处理数据，如此实现联动查询。