.vue文件模板
<template>
<div>
<el-button-group>
<el-button type="primary" icon="el-icon-edit"></el-button>
<el-button type="primary" icon="el-icon-share"></el-button>
<el-button type="primary" icon="el-icon-delete"></el-button>
</el-button-group>
<el-table
:data="tableData"
style="width: 100%">
<el-table-column
prop="id"
label="ID"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="deptId"
label="部门ID">
</el-table-column>
<el-table-column
prop="age"
label="年龄">
</el-table-column>
</el-table>
<el-pagination
background
layout="prev, pager, next"
:total="1000">
</el-pagination>
</div>
</template>
<script>
// 需要使用哪里的功能, 就进行ES6的 导包操作
import employee from '@/api/employee.js'
export default {
// 数据,用于跟交流的数据
data() {
return {
tableData:[]
}
},
// 界面中会调用的一些方法
methods: {
},
created:function(){
//发送ajax请求,后台获取数据,然后填充 tableData 属性。
employee.getList().then(repsonse => {
//成功以后的响应处理
console.log(repsonse)
this.tableData = repsonse.data.data;
})
}
}
</script>
<style>
</style>