un7.20:如何同时将关联表中的两个属性展示出来？

我们在实现多表联查的情况下，一般只能查询到一个属性，比如，当我将病房与病区成功关联后，只能查看到病区的id，那么如果我想同时展示病区的id和病区的名称，该如何去实现呢？

所需软件：IDEA、VS-Code

一、先将两张表进行关联，方法可以参考un7.19的博客。

二、我们需要在VS-Code中的vue文件中做一点点文章。

1、将需要展示的两个属性全部都写上去。

<el-table :data="homeList">
        <el-table-column label="ID" prop="id" align="center" ></el-table-column>
        <el-table-column label="病房编号" prop="homeId" align="center" ></el-table-column>
        <el-table-column label="病房名称" prop="homeName" align="center" ></el-table-column>
        <el-table-column label="是否启用" prop="homeStart" align="center" >
          <template  slot-scope="scope"> 
           {{scope.row.homeStart ==0 ? '启用' : '停用'}}
          </template>
        </el-table-column>
        <el-table-column label="病区编码" prop="wardId" align="center" ></el-table-column>
        <el-table-column label="病区名称" prop="wardName" align="center" ></el-table-column>
        <el-table-column label="责任医生" prop="doctorId" align="center" ></el-table-column>
        <el-table-column label="责任护士" prop="nurseId" align="center" ></el-table-column>
        <el-table-column label="操作" align="center">
           <template  slot-scope="scope"> 
           <el-button @click="handleUpdate(scope.row)"   type="text" size="mini" icon="el-icon-edit"  >修改</el-button> 
           <el-button @click="handledelecte(scope.row)"  type="text" size="mini" icon="el-icon-delete">删除</el-button> 
           </template>
        </el-table-column>
      </el-table>

2、导入。

import {listWard} from '@/api/basic/ward';

3、定义声明。

data(){
   return{
      listWard:[],//病区列表
}
    }

4、传入要查询的参数。

queryParam:{ //查询参数
         homeId:null, //病房编号
         homeName:null,  //病房名称
         wardName:null, //病区名称
         homeStart:null,  //是否启用
         wardId:null, //病房所属病区id
         doctorId:null,  //病房所属医生id
         nurseId:null, //病房所属护士id
         bedId:null, //床位
         pageNum:1,  //页码
         pageSize:10 ,//每页显示的条数
         total:0 //总条数
      },

5、查询病区列表。

/*查询病区列表*/
    getWard(){
      console.log(this.queryParam)
      listWard(this.queryParam).then(response=>{
        console.log(response);
        this.listWard=response.rows;
      });
    },

6、将传入的参数接收。

created(){
    this.getWard();
  },

三、测试。

 如此，我们就可以在关联表中同时查询到病区编码和病区名称两个属性，修改的时候只需要修改其中一个属性，另一个属性就会根据另一张表中的内容改变。

现附上VS-Code中的完整代码。

<template>
    <div class="app-container">
      <el-form :model="queryParam" ref="queryForm" size="small" :inline="true" label-width="68px">
           <el-form-item label="病房编号" prop="homeId"> 
            <el-input @keyup.enter.native="handelQuery" v-model="queryParam.homeId" placeholder="请输入病房编号" clearable>   
            </el-input> 
           </el-form-item>
           <el-form-item label="病房名称" prop="homeName"> 
            <el-input @keyup.enter.native="handelQuery" v-model="queryParam.homeName" placeholder="请输入病房名称" clearable>   
            </el-input> 
           </el-form-item>
           <el-form-item label="病区名称" prop="wardId"> 
            <el-select v-model="queryParam.wardId" placeholder="请选择" size="mini">
                  <el-option v-for="s in listWard" :label="s.wardName" :value="s.id" :key="s.id">
                  </el-option>
              </el-select> 
           </el-form-item>
           <el-form-item>
             <el-button type="primary" size="mini" icon="el-icon-search" @click="handelQuery">搜索</el-button>
             <el-button size="mini" icon="el-icon-refresh" @click="resetQuery">重置</el-button>
           </el-form-item>
      </el-form>
      <el-row :gutter="10" >
        <el-col >
          <el-button plain   @click="handleAdd"  type="primary" icon="el-icon-plus" size="mini">
          新增
          </el-button>
        </el-col>
      </el-row>
       <el-table :data="homeList">
        <el-table-column label="ID" prop="id" align="center" ></el-table-column>
        <el-table-column label="病房编号" prop="homeId" align="center" ></el-table-column>
        <el-table-column label="病房名称" prop="homeName" align="center" ></el-table-column>
        <el-table-column label="是否启用" prop="homeStart" align="center" >
          <template  slot-scope="scope"> 
           {{scope.row.homeStart ==0 ? '启用' : '停用'}}
          </template>
        </el-table-column>
        <el-table-column label="病区编码" prop="wardId" align="center" ></el-table-column>
        <el-table-column label="病区名称" prop="wardName" align="center" ></el-table-column>
        <el-table-column label="责任医生" prop="doctorId" align="center" ></el-table-column>
        <el-table-column label="责任护士" prop="nurseId" align="center" ></el-table-column>
        <el-table-column label="操作" align="center">
           <template  slot-scope="scope"> 
           <el-button @click="handleUpdate(scope.row)"   type="text" size="mini" icon="el-icon-edit"  >修改</el-button> 
           <el-button @click="handledelecte(scope.row)"  type="text" size="mini" icon="el-icon-delete">删除</el-button> 
           </template>
        </el-table-column>
      </el-table>
      <!-- 分页查询 -->
      <pagination 
      :total="queryParam.total" 
      :page.sync="queryParam.pageNum"
      :limit.sync="queryParam.pageSize"
      @pagination="getList"
      />
      <!-- 对话框 -->
      <el-dialog :title="title" width="500px"  :visible.sync="open" append-to-body>
        <!-- 表单 -->
        <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="病房编号" prop="homeId">
             <el-input v-model="form.homeId" placeholder="请输入病房编号"></el-input>
            </el-form-item>
            <el-form-item label="病房名称" prop="homeName">
             <el-input v-model="form.homeName" placeholder="请输入病房名称"></el-input>
            </el-form-item>
            <el-form-item label="是否启用" prop="homeStart">
               <!--下拉列表  -->
              <el-select v-model="form.homeStart" placeholder="请选择" size="mini">
                  <el-option v-for="s  in showList" :label="s.label" :value="s.value" :key="s.value">
                  </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="所属病区" prop="wardId">
               <!--下拉列表  -->
              <el-select v-model="form.wardId" placeholder="请选择" size="mini">
                  <el-option v-for="s in listWard" :label="s.wardName" :value="s.id" :key="s.id">
                  </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="责任医生" prop="doctorId">
               <!--下拉列表  -->
              <el-select v-model="form.doctorId" placeholder="请选择" size="mini">
                  <el-option v-for="s in showListys" :label="s.label" :value="s.value" :key="s.value">
                  </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="责任护士" prop="nurseId">
               <!--下拉列表  -->
              <el-select v-model="form.nurseId" placeholder="请选择" size="mini">
                  <el-option v-for="s in showLisths" :label="s.label" :value="s.value" :key="s.value">
                  </el-option>
              </el-select>
            </el-form-item>
        </el-form>  
        <div slot="footer"> 
          <el-button @click="submitForm" type="primary">确定</el-button>
          <el-button @click="cancel" >取消</el-button>
        </div> 
      </el-dialog>
    </div>
</template>
<script>
import {listHome,addHome,removeHome,getHome,editHome} from '@/api/basic/home';
import {listWard} from '@/api/basic/ward';
export default {
  data(){
   return{
      listWard:[],//病区列表
      homeList:[],//病房数据
      queryParam:{ //查询参数
         homeId:null, //病房编号
         homeName:null,  //病房名称
         wardName:null, //病区名称
         homeStart:null,  //是否启用
         wardId:null, //病房所属病区id
         doctorId:null,  //病房所属医生id
         nurseId:null, //病房所属护士id
         bedId:null, //床位
         pageNum:1,  //页码
         pageSize:10 ,//每页显示的条数
         total:0 //总条数
      },
      title:null,//对话框标题
      open:false, //对话框是否显示
      //表单内容
      form:{
         homeId:null, //病房编号
         homeName:null,  //病房名称
         wardName:null, //病区名称
         homeStart:null,  //是否启用
         wardId:null, //病房所属病区id
         doctorId:null,  //病房所属医生id
         nurseId:null  //病房所属护士id
      },
      //下拉列表显示的内容
      showList:[
        { label:'启用',value:0 },
        { label:'停用',value:1 }
      ],
      showListys:[
        { label:'顾魏',value:11 },
        { label:'唐医生',value:12 },
        { label:'董仕超',value:13 },
        { label:'琚晓峰',value:14 },
        { label:'秦毅',value:15 }
      ],
      showLisths:[
        { label:'吴宏宇',value:22 },
        { label:'贺晓娟',value:23 },
        { label:'李少英',value:24 },
        { label:'薛宁',value:25 },
        { label:'李欣',value:26 }
      ]
   }
  },
  created(){
    this.getList();
    this.getWard();
  },
  methods:{
      /*查询病房列表*/
    getList(){
      console.log(this.queryParam)
      listHome(this.queryParam).then(response=>{
        
        console.log(response);
        this.homeList=response.rows;
        this.queryParam.total=response.total;
      });
    },
    /*查询病区列表*/
    getWard(){
      console.log(this.queryParam)
      listWard(this.queryParam).then(response=>{
        
        console.log(response);
        this.listWard=response.rows;
      });
    },
    /*修改按钮操作 */
    handleUpdate(row){
      console.log(row)
      getHome({id:row.id}).then(response=>{
        console.log(response)
        this.form=response.data;
      })
      this.title="修改信息";
       this.open=true;
    },
    /*删除按钮操作*/
    handledelecte(row){
      console.log(row)
       removeHome({id:row.id}).then(response=>{
           console.log("添加成功")
           console.log(response)
           if(response.code==200){
              this.$modal.msgSuccess(response.msg);
           }else{
              this.$modal.msgError(response.msg);
           }
           this.cancel();
           this.getList();  
         })
    },
    /*新增按钮操作 */
    handleAdd(){
       this.resetForm("form");//重置表单
       this.title="添加信息";
       this.open=true;
    },
    /*按钮取消对话框 */
    cancel(){
      this.open=false;
    },
    /*提交按钮操作 */
    submitForm(){
      console.log("提交成功");
      if(this.form.id==null){//添加home
         addHome(this.form).then(response=>{
           console.log("添加成功")
           console.log(response)
           if(response.code==200){
              this.$modal.msgSuccess(response.msg);
           }else{
              this.$modal.msgError(response.msg);
           }
           this.cancel();
           this.getList();  
         })
      }else{//修改home
          editHome(this.form).then(response=>{
            if(response.code==200){
              this.$modal.msgSuccess(response.msg);
           }else{
              this.$modal.msgError(response.msg);
           }
           this.cancel();
           this.getList();  
          })
      }
    },
    handelQuery(){
      this.queryParam.pageNum=1;
      this.getList();
    },
    resetQuery(){
      this.resetForm("queryForm");
      this.handelQuery();
    }
  }
}
</script>

<style >
</style>