?

1.在views文件夾下新建person-msg.vue

頁面布局如下：

　　

<el-row>
<el-col :span="24">
<div v-if="Teacherform">
<h4 class="title">教師信息</h4>
　　　　//渲染教師信息
<el-table :data="teacherData" border style="width: 100%" >
<el-table-column prop="id" label="賬號"></el-table-column>
<el-table-column prop="tname" label="姓名"></el-table-column>
<el-table-column prop="tsex" label="性別"></el-table-column>
<el-table-column prop="tdepart" label="部門"></el-table-column>
<el-table-column prop="class_cno" label="課程名"></el-table-column>
<el-table-column prop="passwd" label="密碼"></el-table-column>
<el-table-column prop="role" label="角色"></el-table-column>
</el-table>
</div>
<div v-if="Studentform">
<h4 class="title">學(xué)生信息</h4>
　　　　//渲染學(xué)生信息
<el-table :data="studentData" border style="width: 100%" >
<el-table-column prop="id" label="學(xué)號"></el-table-column>
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年齡"></el-table-column>
<el-table-column prop="sex" label="性別"></el-table-column>
<el-table-column prop="major" label="專業(yè)"></el-table-column>
<el-table-column prop="depart" label="院系"></el-table-column>
<el-table-column prop="term" label="學(xué)期"></el-table-column>
<el-table-column prop="year" label="年級"></el-table-column>
<el-table-column prop="passwd" label="密碼"></el-table-column>
<el-table-column prop="role" label="角色"></el-table-column>
</el-table>
</div>
</el-col>
</el-row>

<script>
import Main from '../api.js'; //引用接口js,所有請求的接口都在這個里面
export default {
name: "person-msg",
data(){
return{
teacherData:[],
studentData:[],
Teacherform:false,
Studentform:false
}
},
mounted(){
this.init(); //頁面初始化加載
},
methods:{
init(){
var id = sessionStorage.getItem('userId'); //獲得用戶登錄信息的id和role
var role = sessionStorage.getItem('userRole');
　　　　　　　　//傳id和role給后臺
this.$http.get(Main.getPersonmsg(id,role)).then(res => {
let {errCode,errMsg,dataList}= res.data;
if(errCode==0){
　　　　　　　　　//如果是教師，顯示教師信息
if(role==1){
this.Teacherform = true;
const teacherArray=dataList;
this.teacherData=teacherArray;
}else{
this.Studentform = true;
const studentArray=dataList;
this.studentData = studentArray;
}
}else{
this.$message.error(errMsg)
}
}, response => {
this.$message.error('error submit!!');
return false;
});
}
}
}
</script>

附個人信息請求接口：
　　　　

要求傳用戶id和角色（es6寫法）

?

上面講述的主要是element-ui怎么動態(tài)渲染表格數(shù)據(jù)，個人總結(jié)所得，望大家閱讀！

下章介紹vue+element-ui 實現(xiàn)數(shù)據(jù)的增刪改查以及分頁！

?

　　　　　　　　　　　付出不一定有回報，但不付出一定沒有回報

?

轉(zhuǎn)載于:https://www.cnblogs.com/ycc-521/p/9597502.html

總結(jié)

以上是生活随笔為你收集整理的vue基于element-ui制作的成绩管理系统（四）个人信息的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。