vue 三级联动

前端VUESAD

<template>
    <div>
        <el-form ref="form" :model="order" label-width="80px">
            <el-form-item label="姓名">
                <el-input v-model="order.orderName" style="width: 500px"></el-input>
            </el-form-item>
            <el-form-item label="电话">
                <el-input v-model="order.orderPhone" style="width: 500px"></el-input>
            </el-form-item>
            <el-form-item label="地址" aria-placeholder="请选择">
                <el-select v-model="order.shengid" placeholder="省" @change="shi()">
                    <el-option
                            v-for="item in options1"
                            :key="item.did"
                            :label="item.dname"
                            :value="item.did"
                    >
                    </el-option>
                </el-select>
                <el-select v-model="order.shiid" placeholder="市" @change="xian()">
                    <el-option
                            v-for="item in options2"
                            :key="item.did"
                            :label="item.dname"
                            :value="item.did">
                    </el-option>
                </el-select>
                <el-select v-model="order.xianid" placeholder="县" @change="ququ()" >
                    <el-option
                            v-for="item in options3"
                            :key="item.did"
                            :label="item.dname"
                            :value="item.did" >
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="地址" prop="address">
                <el-input type="text" v-model="order.address" autocomplete="off" style="width: 500px"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="adduser()">添加</el-button>
                <el-button>取消</el-button>
            </el-form-item>
        </el-form>

    </div>
</template>

<script>
    export default {
        name: "addorder",
        data(){
            return{
                order:{shengid:"",shiid:"",address:"",a:"",b:"",c:" ",xianid:""},
                options1:[],
                options2:[],
                options3:[],
            }
        },
        methods:{
            sheng(){
                this.$http.get("/city/findSheng").then((resp)=>{
                    console.log(resp)
                    this.options1=resp.data.data;
                })
            },
            shi(){
                this.options2=[];
                this.order.shiid="";
                this.options3=[];
                this.order.xianid="";
                this.$http.get("/city/findcity/"+this.order.shengid).then((resp)=>{
                    this.options2=resp.data.data.list;
                    this.order.a=resp.data.data.dname;
                })
            },
            xian(){
                this.$http.get("/city/findcity/"+this.order.shiid).then((resp)=>{
                    this.options3=resp.data.data.list;
                    this.order.b=resp.data.data.dname;
                })
            },
            ququ(){
                this.$http.get("/city/qu/"+this.order.xianid).then((resp)=>{
                    this.order.c=resp.data.data.dname;
                    this.order.address=this.order.a+this.order.b+this.order.c;
                })
            },
            adduser(){
                    console.log(this.order);
                this.$http.post("/order/add",this.order).then((resp)=>{
                    this.$message.success("添加成功")
                })
            }
        },
        mounted() {
            this.sheng();
        }
    }
</script>

<style scoped>

</style>

                后端controller

@RestController
@RequestMapping("/city")
@CrossOrigin
public class CityController {

    @Autowired
    private CityService cityService;
    
    @GetMapping("/findcity/{did}")
    public Result findCity(@PathVariable Integer did){
        HashMap<String, Object> map = new HashMap<>();
        City city = cityService.findDnameByDid(did);
        List<City> list = cityService.findCityByDid(did);
        map.put("dname",city.getDname());
        map.put("list",list);
        return ResultUtils.success(map);
    }

    @GetMapping("/findSheng")
    public Result findSheng(){
        List<City> sheng = cityService.findSheng();
        return ResultUtils.success(sheng);
    }

    @GetMapping("/qu/{pid}")
    public Result qu(@PathVariable("pid") Integer pid){
        City findqu = cityService.findqu(pid);
        HashMap<String, Object> map = new HashMap<>();
        map.put("dname",findqu.getDname());
        return ResultUtils.success(map);

    }

 service

@Service
public class CityService {
    @Autowired
    private CityMapper cityMapper;

    public City findDnameByDid(Integer did) {
        return cityMapper.selectById(did);
    }

    public List<City> findCityByDid(Integer did) {
        return cityMapper.findAll(did);
    }

    public List<City> findSheng() {
        return cityMapper.findSheng();
    }

    public City findqu(Integer pid) {
        return cityMapper.selectById(pid);
    }
}

mapper

public interface CityMapper extends BaseMapper<City> {
    @Select("select * from t_city where pid=#{did} ")
    List<City> findAll(Integer did);

    @Select("select * from t_city where pid=0")
    List<City> findSheng();
}