前后端分离入门 数据对接
Posted 一个经常掉线的人
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前后端分离入门 数据对接相关的知识,希望对你有一定的参考价值。
使用eleui的table标签 渲染图书数据
完整代码
<template>
<div>
<el-table
:data="tableData"
border
style="width: 100%">
<el-table-column
fixed
prop="id"
label="编号"
width="80">
</el-table-column>
<el-table-column
prop="name"
label="书名"
width="120">
</el-table-column>
<el-table-column
prop="author"
label="作者"
width="140">
</el-table-column>
<el-table-column
label="操作"
width="100">
<template slot-scope="scope">
<el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
<el-button type="text" size="small">编辑</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
methods: {
handleClick(row) {
console.log(row);
},
},
created() {
const _this=this//保存this 在回调函数时可以正常使用
axios.get(\'http://localhost:8181/book/findAll\').then(function (resp){
_this.tableData=resp.data
})
},
data() {
return {
tableData: [{
id: \'1\',
name: \'java\',
author: \'jie\',
},
{
id: \'2\',
name: \'java2\',
author: \'jie2\',
},
{
id: \'3\',
name: \'java3\',
author: \'jie3\',
},]
}
}
}
</script>
以上是关于前后端分离入门 数据对接的主要内容,如果未能解决你的问题,请参考以下文章