vue实现前端Excel分页显示

直接上步骤。。。。

1. 搭建vue项目 （这个不赘述）
2. npm install vue-xlsx-table --save

3. 编辑main.js(代码如下)

import vueXlsxTable from 'vue-xlsx-table'

Vue.use(vueXlsxTable, {rABS: false});

4.使用vue-xlsx-table标签

            <vue-xlsx-table class="input-salary" @on-select-file="handleSelectedFile">
                上传
            </vue-xlsx-table>

5.创建方法

参考https://www.npmjs.com/package/vue-xlsx-table

**问题来了

“convertedData”数据怎么解析

下面是数据

• 看结构是可以看到右body和header属性

• 那就直接获取

                 //获取excel主干信息
                let body=convertedData.body;
                console.log(convertedData);
                // 获取excel的头部信息
                let headers = convertedData.header;

• 下面贴出分页完整代码（还有根据年月实现上传下载还没做完，可以自行优化）

<style lang="less">
    @import 'input-salary.less';
</style>
<template>
    <div id="salary" class="salary">
        <div class="input-salary">
            <!-- 分类类型 -->
            <Select v-model="searchValue.years" style="width:100px" placeholder="选择年份">
                <Option v-for="item in years" :value="item" :key="item">{{ item }}</Option>
            </Select>
            <!-- 分类类型 -->
            <Select v-model="searchValue.month" style="width:100px" placeholder="选择月份">
                <Option v-for="item in months" :value="item" :key="item">{{ item}}</Option>
            </Select>
            <Button class="queryButton" type="primary" >查询</Button>
            <vue-xlsx-table class="input-salary" @on-select-file="handleSelectedFile">
                上传
            </vue-xlsx-table>
        </div>
        <div class="user-list">
            <Table :columns="userListColumns"  border :data="salaryList" :loading="salaryListLoading"></Table>
        </div>


        <div class="page-div">
            <Page class="page"
                  :current="pageNum"
                  :page-size="pageSize"
                  :total="totalElements"
                  placement="top"
                  show-sizer
                  show-elevator
                  show-total
                  @on-change="changePage"
                  @on-page-size-change="changePageSize"></Page>
        </div>
    </div>

</template>


<script>
    export default {
        name: 'salary',
        data(){
            return{
                // 查询条件
                searchValue: {
                    month: '',
                    years: ''
                },
                minYears:2000,//起始年份
                maxYears:new Date().getFullYear(),//目前年份
                // 年选择器参数
                years:[],
                // 月选择器参数
                months:[1,2,3,4,5,6,7,8,9,10,11,12],
                //当前页表格数据容器
                salaryList: [],
                //当前页临时表格容器
                pageList:[],
                //完整表格数据
                excelList:[],
                salaryListLoading: true,
                userListColumns:[

                ],

                // 分页参数
                pageNum: 1,
                pageSize: 10,
                totalElements: 0,
            }

        },

        methods: {

            //获取年份区间对象
            getFullYears() {
                for (let i = this.minYears; i <= this.maxYears; i++) {
                    this.years.push(i);
                }
            },
            handleSelectedFile (convertedData) {
                this.salaryListLoading = false;
                //还原值
                this.excelList = [];
                this.userListColumns = [];
                this.salaryList = [];
                console.log(this.excelList);
                //获取excel主干信息
                let body=convertedData.body;
                console.log(convertedData);
                // 获取excel的头部信息
                let headers = convertedData.header;
                //给userListColumns赋值
                headers.forEach((item)=>{
                    var a = {title: '身份',align: 'center', key: 'role',};
                    a.key = item;
                    a.title = item;
                    this.userListColumns.push(a)
                })
                //只获取完整表数据
                this.excelList = body;
                // 获取总条数
                this.totalElements =this.excelList.length ;
                console.log(this.totalElements);
                this.change();
                //给当前页赋值
                this.salaryList = this.pageList;
                //临时容器清空
                this.pageList=[];
            },

            // 分页事件
            change(){
                //上行
                let a = this.pageSize*this.pageNum;
                //下行
                let b = this.pageSize*(this.pageNum)-this.pageSize;
                this.excelList.forEach((item,index)=> {
                    if (b<=index&&index<a){
                        this.pageList.push(item);
                    }
                        return;
                });
            },

            changePage (index) {
                this.salaryListLoading= false;
                this.pageNum = index;
                this.pageList = [];
                this.change();
                this.salaryList=this.pageList;
                this.pageList=[];
            },
            changePageSize (val) {
                this.pageSize = val;
                this.pageNum = 1;
                this.totalElements = ((this.excelList-1)/this.pageSize+1);
                this.pageList = [];
                this.change();
                this.salaryList=this.pageList;
                this.pageList=[];
            },
        },

        created () {
            this.getFullYears();
        },
    }
</script>

• css样式

.salary{
    .page-div {
        position: relative;
        .page {
            right: 0;
            position: absolute;
            margin: 10px 20px 20px 0
        }
    }
    .queryButton {
        margin-left: 8px;
    }

    .input-salary {
        margin-left: 8px;
    }


}

• 效果图

（json数据都有了，可以做传输到后台入库）