当前位置:网站首页>Un7.20: how to display two attributes in an association table at the same time?
Un7.20: how to display two attributes in an association table at the same time?
2022-07-22 02:31:00 【Excellent little Aiko】
We are implementing multi table joint query , Generally, only one attribute can be queried , such as , When I successfully associate the ward with the ward , Only those in the ward can be viewed id, So if I want to show the ward at the same time id And the name of the ward , How to achieve it ?
Software required :IDEA、VS-Code
One 、 First associate the two tables , The method can refer to un7.19 The blog of .
Two 、 We need to be in VS-Code Medium vue Make a little article in the document .
1、 Write down all the two attributes that need to be displayed .
<el-table :data="homeList">
<el-table-column label="ID" prop="id" align="center" ></el-table-column>
<el-table-column label=" Ward number " prop="homeId" align="center" ></el-table-column>
<el-table-column label=" Ward name " prop="homeName" align="center" ></el-table-column>
<el-table-column label=" Is it enabled? " prop="homeStart" align="center" >
<template slot-scope="scope">
{
{scope.row.homeStart ==0 ? ' Enable ' : ' Discontinue use '}}
</template>
</el-table-column>
<el-table-column label=" Ward code " prop="wardId" align="center" ></el-table-column>
<el-table-column label=" Ward name " prop="wardName" align="center" ></el-table-column>
<el-table-column label=" Responsible doctor " prop="doctorId" align="center" ></el-table-column>
<el-table-column label=" Responsible nurse " prop="nurseId" align="center" ></el-table-column>
<el-table-column label=" operation " align="center">
<template slot-scope="scope">
<el-button @click="handleUpdate(scope.row)" type="text" size="mini" icon="el-icon-edit" > modify </el-button>
<el-button @click="handledelecte(scope.row)" type="text" size="mini" icon="el-icon-delete"> Delete </el-button>
</template>
</el-table-column>
</el-table>
2、 Import .
import {listWard} from '@/api/basic/ward';
3、 Definition statement .
data(){
return{
listWard:[],// Ward list
}
}
4、 Pass in the parameter to query .
queryParam:{ // Query parameters
homeId:null, // Ward number
homeName:null, // Ward name
wardName:null, // Ward name
homeStart:null, // Is it enabled?
wardId:null, // Ward belongs to ward id
doctorId:null, // The doctor of the ward id
nurseId:null, // The nurse of the ward id
bedId:null, // bed
pageNum:1, // Page number
pageSize:10 ,// Number of entries per page
total:0 // Total number of articles
},
5、 Query the ward list .
/* Query the ward list */
getWard(){
console.log(this.queryParam)
listWard(this.queryParam).then(response=>{
console.log(response);
this.listWard=response.rows;
});
},
6、 Receive the passed in parameters .
created(){
this.getWard();
},
3、 ... and 、 test .
such , We can query the two attributes of ward code and ward name in the association table at the same time , When modifying, you only need to modify one of the attributes , Another attribute will change according to the contents of another table .
Enclosed VS-Code Complete code in .
<template>
<div class="app-container">
<el-form :model="queryParam" ref="queryForm" size="small" :inline="true" label-width="68px">
<el-form-item label=" Ward number " prop="homeId">
<el-input @keyup.enter.native="handelQuery" v-model="queryParam.homeId" placeholder=" Please enter the ward number " clearable>
</el-input>
</el-form-item>
<el-form-item label=" Ward name " prop="homeName">
<el-input @keyup.enter.native="handelQuery" v-model="queryParam.homeName" placeholder=" Please enter the ward name " clearable>
</el-input>
</el-form-item>
<el-form-item label=" Ward name " prop="wardId">
<el-select v-model="queryParam.wardId" placeholder=" Please select " 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"> Search for </el-button>
<el-button size="mini" icon="el-icon-refresh" @click="resetQuery"> Reset </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">
newly added
</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=" Ward number " prop="homeId" align="center" ></el-table-column>
<el-table-column label=" Ward name " prop="homeName" align="center" ></el-table-column>
<el-table-column label=" Is it enabled? " prop="homeStart" align="center" >
<template slot-scope="scope">
{
{scope.row.homeStart ==0 ? ' Enable ' : ' Discontinue use '}}
</template>
</el-table-column>
<el-table-column label=" Ward code " prop="wardId" align="center" ></el-table-column>
<el-table-column label=" Ward name " prop="wardName" align="center" ></el-table-column>
<el-table-column label=" Responsible doctor " prop="doctorId" align="center" ></el-table-column>
<el-table-column label=" Responsible nurse " prop="nurseId" align="center" ></el-table-column>
<el-table-column label=" operation " align="center">
<template slot-scope="scope">
<el-button @click="handleUpdate(scope.row)" type="text" size="mini" icon="el-icon-edit" > modify </el-button>
<el-button @click="handledelecte(scope.row)" type="text" size="mini" icon="el-icon-delete"> Delete </el-button>
</template>
</el-table-column>
</el-table>
<!-- Paging query -->
<pagination
:total="queryParam.total"
:page.sync="queryParam.pageNum"
:limit.sync="queryParam.pageSize"
@pagination="getList"
/>
<!-- Dialog box -->
<el-dialog :title="title" width="500px" :visible.sync="open" append-to-body>
<!-- Forms -->
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label=" Ward number " prop="homeId">
<el-input v-model="form.homeId" placeholder=" Please enter the ward number "></el-input>
</el-form-item>
<el-form-item label=" Ward name " prop="homeName">
<el-input v-model="form.homeName" placeholder=" Please enter the ward name "></el-input>
</el-form-item>
<el-form-item label=" Is it enabled? " prop="homeStart">
<!-- The drop-down list -->
<el-select v-model="form.homeStart" placeholder=" Please select " 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=" Ward " prop="wardId">
<!-- The drop-down list -->
<el-select v-model="form.wardId" placeholder=" Please select " 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=" Responsible doctor " prop="doctorId">
<!-- The drop-down list -->
<el-select v-model="form.doctorId" placeholder=" Please select " 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=" Responsible nurse " prop="nurseId">
<!-- The drop-down list -->
<el-select v-model="form.nurseId" placeholder=" Please select " 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"> determine </el-button>
<el-button @click="cancel" > 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:[],// Ward list
homeList:[],// Ward data
queryParam:{ // Query parameters
homeId:null, // Ward number
homeName:null, // Ward name
wardName:null, // Ward name
homeStart:null, // Is it enabled?
wardId:null, // Ward belongs to ward id
doctorId:null, // The doctor of the ward id
nurseId:null, // The nurse of the ward id
bedId:null, // bed
pageNum:1, // Page number
pageSize:10 ,// Number of entries per page
total:0 // Total number of articles
},
title:null,// Dialog title
open:false, // Whether the dialog box displays
// Form content
form:{
homeId:null, // Ward number
homeName:null, // Ward name
wardName:null, // Ward name
homeStart:null, // Is it enabled?
wardId:null, // Ward belongs to ward id
doctorId:null, // The doctor of the ward id
nurseId:null // The nurse of the ward id
},
// The contents displayed in the drop-down list
showList:[
{ label:' Enable ',value:0 },
{ label:' Discontinue use ',value:1 }
],
showListys:[
{ label:' Gu Wei ',value:11 },
{ label:' Dr. Tang ',value:12 },
{ label:' Dongshichao ',value:13 },
{ label:' Ju Xiaofeng ',value:14 },
{ label:' Qin Yi ',value:15 }
],
showLisths:[
{ label:' Wuhongyu ',value:22 },
{ label:' He Xiaojuan ',value:23 },
{ label:' Li Shaoying ',value:24 },
{ label:' Gooding ',value:25 },
{ label:' Li xin ',value:26 }
]
}
},
created(){
this.getList();
this.getWard();
},
methods:{
/* Query the ward list */
getList(){
console.log(this.queryParam)
listHome(this.queryParam).then(response=>{
console.log(response);
this.homeList=response.rows;
this.queryParam.total=response.total;
});
},
/* Query the ward list */
getWard(){
console.log(this.queryParam)
listWard(this.queryParam).then(response=>{
console.log(response);
this.listWard=response.rows;
});
},
/* Modify button operation */
handleUpdate(row){
console.log(row)
getHome({id:row.id}).then(response=>{
console.log(response)
this.form=response.data;
})
this.title=" Modify the information ";
this.open=true;
},
/* Delete button operation */
handledelecte(row){
console.log(row)
removeHome({id:row.id}).then(response=>{
console.log(" Add success ")
console.log(response)
if(response.code==200){
this.$modal.msgSuccess(response.msg);
}else{
this.$modal.msgError(response.msg);
}
this.cancel();
this.getList();
})
},
/* Add button operation */
handleAdd(){
this.resetForm("form");// Reset form
this.title=" Add information ";
this.open=true;
},
/* Button to cancel the dialog box */
cancel(){
this.open=false;
},
/* Submit button operation */
submitForm(){
console.log(" Submit successfully ");
if(this.form.id==null){// add to home
addHome(this.form).then(response=>{
console.log(" Add success ")
console.log(response)
if(response.code==200){
this.$modal.msgSuccess(response.msg);
}else{
this.$modal.msgError(response.msg);
}
this.cancel();
this.getList();
})
}else{// modify 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>
边栏推荐
- C load and display menu
- Vmware Workstation Pro虚拟机网络三种网卡类型及使用方式
- MySQL advanced (XIV) implementation method of batch update and batch update of different values of multiple records
- js对象:检测属性是否存在
- 已解决(selenium操作火狐浏览器报错)TypeError: __init__() got an unexpected keyword argument ‘firefox_options‘
- Numpy04_ Linear algebra (unfinished)
- The architecture mode is excerpted from "happy when you smell defects" (this book can be downloaded for free)
- SQL basic statement exercise
- go在64位环境下编译32位程序
- SQL daily practice (Niuke new question bank) - day 3: condition query
猜你喜欢
[Development Tutorial 4] crazy shell · humanoid hip-hop robot PC upper computer online debugging
选择WMS仓储条码管理系统的注意事项
基于深度神经网络的中药材识别
Replace ribbon load balancer with loadbalancer
un7.20:如何同时将关联表中的两个属性展示出来?
FastDFS高可用使用介绍
RichView Table 表格对齐
交换机DHCP服务器配置方法(命令行版)
Skywalking custom link tracking and performance analysis
mysql.h: No such file or directory
随机推荐
Excel if interprets that if the cell is empty, it will not participate in the calculation
请教个问题,按照快速上手的来,flink SQL 建表后查询,出来表结构,但是有个超时报错,怎么办?
一年时间过去了,LiveData真的被Flow代替了吗? LiveData会被废弃吗?
go在64位环境下编译32位程序
[214] PHP reads the writing method of all files in the directory
Redis基础知识、应用场景、集群安装
[untitled]
Pd 使用手册
Fluent introduces the graphic verification code and retains the sessionid
Communication excerpt from "happy when you smell defects" (this book can be downloaded for free)
Objet js: détection de l'existence d'attributs
[自然语言处理] 预训练词向量百度云下载 [Word2Vec, Glove, FastText]
VLAN与三层交换机
CTF解题思路
【sklearn】数据集拆分 sklearn.moduel_selection.train_test_split
Redis常用配置说明
H5网站接入微信支付(H5支付+JSAPI支付)
Go compiles 32-bit programs in 64 bit environment
STM32+ENC28J60+UIP协议栈实现WEB服务器示例
MySQL. Pas de fichier ou de répertoire