ElementUI select多级联动

E l e m e n t U I − S e l e c t 多 级 联 动 ElementUI -Select多级联动 ElementUI−Select多级联动

多级联动逻辑

1. mounted()函数获取第一级数据
2. 选择第一级数据，通过change函数获得返回的value
3. 通过value，结合methods里面的方法获取第二级数据
4. 选择第二级数据，通过change函数获得返回第二级的value
5. 通过第二级的value，结合methods里面的方法获取第三级数据
6. 完成联动

<template>
<div class="">

  <br><br>
  <el-row :gutter="10">
      <br><br>
      <el-col :span="8" :offset="9">
            一级数据集：
            <el-select v-model="value1" placeholder="请选择" @change="GetCurId1">
                <el-option
                v-for="item in options1"
                :key="item.id"
                :label="item.name"
                :value="item.id">
                </el-option>
            </el-select>
      </el-col>
  </el-row>
  <!-- 二级数据集 -->
  <el-row :gutter="10">
      <el-col :span="8" :offset="9">
            二级数据集：
            <el-select v-model="value2" placeholder="请选择"  @change="GetCurId2">
                <el-option
                v-for="item in options2"
                :key="item.id"
                :label="item.name"
                :value="item.id">
                </el-option>
            </el-select>
      </el-col>
  </el-row>
  <!-- 三级数据集 -->
  <el-row :gutter="10">
      <el-col :span="8" :offset="9">
            三级数据集：
            <el-select v-model="value3" placeholder="请选择"  @change="GetCurId3">
                <el-option
                v-for="item in options3"
                :key="item.id"
                :label="item.introduction"
                :value="item.id">
                </el-option>
            </el-select>
      </el-col>
  </el-row>
</div>
</template>

<script type="text/ecmascript-6">
import {Row,Col,Select,Option,Button,Form,Input,FormItem} from "element-ui"
export default {
  name: "Evaluate",
  data() {
    return {
        options1: [],
        options2: [],
        options3: [],
        value1: '',
        value2: '',
        value3: '',
    }
  },
  components:{
        [Row.name]:Row,
        [Col.name]:Col,
        [Select.name]:Select,
        [Option.name]:Option,
        [Button.name]: Button,
        [Form.name]: Form,
        [Input.name]: Input,
        [FormItem.name]: FormItem
  },
  methods:{
    GetCurId1(val){
      // console.log("GetCurId1")
      // console.log(val)
      // console.log("GetCurId1")
      this.$http.get("http://127.0.0.1:8001/gen_model/category2/"+val).then(res=>{
        // console.log("8888888888888888")
        // console.log(res.data)
        this.options2 = res.data;
        // console.log("8888888888888888")
      }).catch(err =>{
        console.log(err)
      })

    },
    GetCurId2(val){
      // console.log("GetCurId2")
      // console.log(val)
      // console.log("GetCurId2")
        this.$http.get("http://127.0.0.1:8001/gen_model/category3/"+val).then(res=>{
        // console.log("options3")
        // console.log(res.data)
        this.options3 = res.data;
        // console.log("options3")
      }).catch(err =>{
        console.log(err)
      })

    },
    GetCurId3(val){
      console.log("GetCurId3")
      console.log(val)
      console.log("GetCurId3")
    },

  },
    mounted(){
      this.$http.get("http://127.0.0.1:8001/gen_model/category1/").then(res=>{
        // console.log("8888888888888888")
        // console.log(res.data)
        this.options1 = res.data;
        // console.log("8888888888888888")
      }).catch(err =>{
        console.log(err)
      })
  }
}
</script>

<style scoped lang='scss'>
</style>

数据库