|
直接上源码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link
rel="stylesheet"
href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
/>
<script lang="javascript" src="dist/xlsx.full.min.js"></script>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<title>Document</title>
</head>
<body>
<input type="file" οnchange="importf(this)" />
<div id="app">
<el-table
:data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
style="width: 100%"
>
<el-table-column
v-for="(item,key,index) in tableData[0]"
:key="index"
:prop="key"
:label="key"
width="180"
></el-table-column>
</el-table>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[15, 20, 30, 40]"
:page-size="pagesize"
layout="total, sizes, prev, pager, next, jumper"
:total="tableData.length"
>
</el-pagination>
</div>
<script>
var vue = new Vue({
el: "#app",
data: {
tableData: [],
currentPage: 1,
pagesize: 15
},
methods: {
// 初始页currentPage、初始每页数据数pagesize和数据data
handleSizeChange: function(size) {
this.pagesize = size;
console.log(this.pagesize); //每页下拉显示数据
},
handleCurrentChange: function(currentPage) {
this.currentPage = currentPage;
console.log(this.currentPage); //点击第几页
}
}
});
function importf(obj) {
//导入
if (!obj.files) {
return;
}
var f = obj.files[0];
console.log(f);
var reader = new FileReader();
var jsonobject_0;
var result = [];
reader.onload = function(e) {
var data = e.target.result;
//获取xlsx对象
var workbook = XLSX.read(data, {
type: "binary"
});
jsonobject_0 = XLSX.utils.sheet_to_json(
workbook.Sheets[workbook.SheetNames[0]]
);
vue.$data.tableData = jsonobject_0;
console.log(jsonobject_0);
};
reader.readAsBinaryString(f);
}
</script>
</body>
</html>
| 
转播
