(前端)联动查询

文章展示了如何在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层接受参数处理数据,如此实现联动查询。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值