element ui Select 后台获取数据

前端

Cascader 级联选择器 值没有填 参考官网文档

<template>

<el-cascader-panel :options="options" @change="order"></el-cascader-panel> 

 <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
    


    <el-form-item label="城市" prop="city">
      <el-select v-model="ruleForm.app" placeholder="请先选择城市">
         <el-option v-for="item in ruleForm.location" :key="item" :value="item"></el-option>
      </el-select>
    </el-form-item>
</template>


<script>
export default {

    methods:{
        order(value){
            console.log("按钮有效")
            console.log(value)
            let _this = this
            axios.get("http://localhost:8081/city/location/"+value).then(function(resp){
                console.log(resp.data)
                _this.ruleForm.location=resp.data ;
               
                
            })

        },
       
    },

    data() {
      return {


         ruleForm: {
           
          location:{},
          app:''
        
        },

        
    }
}
</script>

后台

@GetMapping("/location/{name}")
@CrossOrigin 
public List<String> location(@PathVariable("name")  String name) {
        System.out.println(name);
        String[] parts=null ;
        if (name.contains(",")) {
             parts= name.split(",");
        }
        System.out.println(parts[0]);
        System.out.println(parts[1]);
        System.out.println(parts[2]);
        Location location =new Location();
        location.setLid(1);
        location.setLname("hhhh");
        List<Location> locations =new ArrayList<>();
        List<String> list = new ArrayList<>();
        locations.add(new Location(1,"hhh",1));
        locations.add(new Location(2,"wwww",1));
        locations.add(new Location(3,"jjjj",1));
        list.add("lll");
        list.add("jjj");
        list.add("ooo");


        return list;
    }