element上传表格展⽰到页⾯
npm i xlsx --save
<template>
<div class="row analysis-content">
<div class="analysis-content-head">
<h3>右侧显⽰区</h3>
</div>
<div class="analysis-content-body">
<div class="upload-tool">
<span>
<input class="input-file" type="file" @change="exportData"
accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" />          <el-button type="success" size="small" @click="btnClick">上传excel</el-button>
</span>
<el-button type="primary" @click="openColumnDrawer" size="small">查看显⽰列</el-button>
</div>
<div class="table-area">
<div>
<el-table
:data="tableData"
height="450"
size="mini">
<el-table-column
:prop="item"
:label="item"
width="140"
v-for="(item,index) in checkboxTableColumn"
:key="'column'+index">
</el-table-column>
</el-table>
<div class="pagination">
<el-pagination
@size-change="handleSizeChange"
@current-change="CurrentChange"
:current-page="currentPage"
:page-sizes="[10, 20, 30,40,50,100,200,500]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</div>
</div>
</div>
<el-drawer
:before-close="closeColumnDrawer"
:visible.sync="columnDrawerVisible"
direction="rtl"
:withHeader=false
custom-class="column-drawer"
ref="columnDrawer"
size="40%">
<div class="drawer-content" >
<div class="column-content">
<!-- 表格所有列 -->
<!-- 表格所有列 -->
<el-checkbox-group v-model="checkboxTableColumn" size="mini">
<el-checkbox :label="item" border v-for="(item,index) in columnHeader" :key="'column'+index"></el-checkbox>            </el-checkbox-group>
</div>
<div class="drawer-footer" >
<el-button @click="closeColumnDrawer" size="small">取消</el-button>
</div>
</div>
</el-drawer>
</div>
</div>
</template>
<script>
import XLSX from 'xlsx'
export default{
components:{
},
data(){
return{
//所有键的值
columnHeader:[],
// 导⼊的excel的数据
excelData:[],
// 表格显⽰列
checkboxTableColumn:[],
//表格数据
tableData:[],
// 当前分页
currentPage:1,
// 每页显⽰数量
pageSize:10,
// 数据总数
total:0,
/
/ 权限抽屉显⽰
columnDrawerVisible:false,
};
},
computed:{
},
updated(){
},
methods:{
btnClick(){
document.querySelector(".input-file").click();
},
exportData(event){
if(!event.currentTarget.files.length){
return;
}
const that = this;
// 拿取⽂件对象
let f = event.currentTarget.files[0];
//这⾥已经拿到了excel的file⽂件，若是项⽬需求，可直接$emit丢出⽂件
// that.$emit('getMyExcelData',f);
// ⽤FileReader来读取
let reader = new FileReader();
// 重写FileReader上的readAsBinaryString⽅法
// adAsBinaryString = function(f){
//  let binary = "";
//  let wb; // 读取完成的数据
//  let outdata; // 你需要的数据
//  let reader = new FileReader();
// 读取成Uint8Array，再转换为Unicode编码（Unicode占两个字节）
// let bytes = new sult);
// let length = bytes.byteLength;
/
/ for (let i = 0; i < length; i++){
//  binary += String.fromCharCode(bytes[i]);
// }
var data = sult;
// 接下来就是xlsx
var wb = ad(data,{
type:"buffer"
});
var outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
// 导出格式为json，{表数据：[]}
console.log(outdata);
that.tableData=outdata.slice(0,10);
// 获取数据的key
var importDataThead = Array.from(Object.keys(outdata[0])).map(
item =>{
return item;
}
);
that.checkboxTableColumn=importDataThead.slice(0,9);
console.log(importDataThead);
};
// };
// adAsBinaryString(f);
},
// 分页切换
CurrentChange(val){
this.currentPage=val;
this.lData.slice((val-1)*this.pageSize,(val*this.pageSize)-1);
},
/
/ 每页显⽰数量改变
handleSizeChange(val){
this.pageSize=val;
this.lData.slice((this.currentPage-1)*val,(this.currentPage*val)-1);
},
// 打开表格先显⽰列
openColumnDrawer(){
},
// 关闭表格所有列的显⽰
closeColumnDrawer(){
}
}
};
</script>
<style>
.analysis-content{
box-sizing: border-box;
background: #efefef;
padding:15px;
}
.
analysis-content-head{
box-sizing: border-box;
background: #fff;
padding:15px;
}
.analysis-content-body{
box-sizing: border-box;
margin-top: 15px;
background: #fff;
padding:15px;
height:550px;
}
.input-file{
display: none;
}
.column-content{
box-sizing:border-box;padding:40px 15px 60px;
}
box sizing
.el-checkbox-group{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
}
.el-checkbox.is-bordered{
margin-bottom:15px;
}
.el-checkbox.is-bordered+.el-checkbox.is-bordered{ margin-left: 0;
}
.drawer-footer{
text-align: center;
}
</style>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。