html代码
是elementUI的table
<div style="margin: 20px 0;">
<el-table
:data="tableData"
border
style="width: 100%"
>
<el-table-column
fixed
prop="id"
label="序号"
width="150">
</el-table-column>
<el-table-column
prop="xingMing"
label="姓名"
width="120">
</el-table-column>
<el-table-column
prop="shouJiHao"
label="手机号"
width="120">
</el-table-column>
<el-table-column
prop="buMen"
label="部门"
width="120">
</el-table-column>
<el-table-column
prop="zhangHao"
label="账号"
width="300">
</el-table-column>
<el-table-column
prop="miMa"
label="密码"
width="120">
</el-table-column>
<el-table-column
flot="left"
label="操作"
width="180">
<template slot-scope="scope">
<el-button @click="handleClick(scope.row)" type="text" size="small">详情</el-button>
<el-button type="text" size="small">删除</el-button>
<el-button type="text" size="small">修改</el-button>
</template>
</el-table-column>
</el-table>
</div>
js代码
首先定义一个空数组
然后再methods里定义个函数,axios请求数据
new Vue({
el:'#main',
data:{
tableData: []
},
//mounted() {
// this.getTabelInfo();
//},
methods: {
getTabelInfo(){
let _that = this;
axios.get('url/', {
}).then(function(response){
console.log(response.data.object.list);//请求正确时执行的代码
console.log(_that.tableData)//先打印一下空数组
_that.tableData=response.data.object.list//将后台传递的数组赋值给定义的空数组
console.log(_that.tableData)//检查一下数组内是否有数据
}).catch(function(response){
console.log(response);//发生错误时执行的代码
})
},
},
})
最后在mounted调用定义的函数
mounted() {
this.getTabelInfo();
},
展示渲染好的表格
这样就成功啦!!!