标签:入门 author resp 分离 对接 tableData row id name
使用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>
标签:入门,author,resp,分离,对接,tableData,row,id,name 来源: https://www.cnblogs.com/OfflineBoy/p/15142129.html
本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享; 2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关; 3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关; 4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除; 5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。