vue+element级联查询

最新推荐文章于 2025-06-03 10:41:24 发布

原创最新推荐文章于 2025-06-03 10:41:24 发布 · 1.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #element #级联

vue 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何使用Vue.js结合Element UI实现科室与医生的级联查询功能。通过v-model绑定数据，监听科室选项变化，动态获取并更新对应科室下的医生列表，实现前后端数据联动。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue+element级联查询

前端代码

<el-form-item label="科室">
    <el-select v-model="formLabelAlign.type" placeholder="请选择"  v-on:change="getdoctor">
      <el-option value="1" label="外科"></el-option>
      <el-option value="2" label="内科"></el-option> 
      <el-option value="3" label="儿科"></el-option> 
      <el-option value="4" label="耳鼻喉科"></el-option> 
      <el-option value="5" label="皮肤科"></el-option> 
    </el-select>
    </el-form-item>
     <el-form-item label="医生">
    <el-select v-model="formLabelAlign.doctor" placeholder="请选择">
      <el-option v-for="doctor in formLabelAlign.doctors"
      :label="doctor"
      :value="doctor"
      :key="doctor">
      </el-option>
    </el-select>
    </el-form-item>

data数据

data() {
      return {
        type1:'',
          radio:'1',
        labelPosition: 'right',
        formLabelAlign: {
          name: '',
          date1:'',
          sex: '1',
          doctor:'',
          type: '',
          date2:'',
          money:'',
          doctors:[]         
        }
      };
    }

方法

getdoctor()
      {
        console.log(this.formLabelAlign);
        if(this.formLabelAlign.type=='1')
        {
            this.type1='外科';
        }else if(this.formLabelAlign.type=='2')
        {
            this.type1='内科';
        }else if(this.formLabelAlign.type=='3')
        {
            this.type1='儿科';
        }else if(this.formLabelAlign.type=='4')
        {
            this.type1='耳鼻喉科';
        }else if(this.formLabelAlign.type=='5')
        {
            this.type1='皮肤科';
        }
        this.$axios.post('/findDoctor',{ 
              type: this.type1,
        })
        .then(response=>{
            if(response.status==200)
            {
              this.formLabelAlign.doctors=[];
              this.formLabelAlign.doctor='';
              console.log(response);
              for(let i=0; i<response.data.length; i++)
              {
                this.formLabelAlign.doctors[i] = response.data[i].doctor
              }
              console.log(this.formLabelAlign.doctors);
            }
            else
            {
              alert("操作失败");
            }
        })
        .catch(function (error) {
            console.log(error);
        });
      },