<html>
<head>
<title>list</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<style>
#app{
margin: auto 50px;
}
</style>
</head>
<body>
<div id="app">
<div>
<el-table
:data="tableData"
style=" 100%">
<el-table-column
prop="createDate"
label="创建时间"
width="180">
</el-table-column>
<el-table-column
prop="bucketName"
label="bucketName"
width="180">
</el-table-column>
<el-table-column
prop="fileName"
label="fileName"
width="180">
</el-table-column>
<el-table-column
prop="folder"
label="folder"
width="180">
</el-table-column>
<el-table-column
prop="expiration"
label="过期时间"
width="180">
</el-table-column>
<el-table-column
prop="url"
label="URL"
>
</el-table-column>
</el-table>
</div>
</div>
<script>
var app = new Vue({
el: '#app',
data() {
return {
tableData: []
}
},
mounted: function () {
var that = this ;
// get
axios.get('/oss/list')
.then(function (res) {
var data = res.data ;
that.tableData = data ;
console.log(data);
})
.catch(function (error) {
console.log(error);
});
},
methods: {
test: function () {
alert(1)
}
}
})
</script>
</body>
</html>