icore-pass/src/views/index/components/luckDraw.vue

<template>
  <div class="luckDraw">
    <div class="luckDraw_title">
        <span class="text">中奖名单</span>
    </div>
    <div class="luckDraw_select">
        <el-input v-model="form.text1" placeholder="请输入中奖姓名" clearable></el-input>
        <el-button type="primary" @click="selectClick" :loading="selectLoading">
            <i class="el-icon-search"></i> 查询
        </el-button>
        <el-button type="primary" @click="exportData()" :loading="downloadLoading">
            <i class="el-icon-document"></i> 导出(Excel)
        </el-button>
    </div>
    <div class="luckDraw_table">
        <el-table
            ref="tab"
            :data="tableData"
            style="width: 100%;"
            border
            :height="height"
            :stripe="true"
            :highlight-current-row="false"
            :row-style="tableRowStyle"
            :header-cell-style="tableHeaderColor"
            :loading="tableLoading"
            element-tableLoading-text="玩命加载中"
            element-tableLoading-spinner="el-icon-tableLoading"
        >
            <el-table-column
                type="index"
                label="序号"
                fixed="left"
                width="50"
            >
            </el-table-column>
            <el-table-column
                sortable
                v-for="(item,i) in tablehead"
                :key="i"
                :prop="item.prop"
                :label="item.label"
                :min-width="item.width || width">
            </el-table-column>
        </el-table>
         <div class="fy">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="pageSizes"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                :hide-on-single-page="true">
            </el-pagination>
         </div>
    </div>
  </div>
</template>

<script>
import luckDrawTableHead from './luckDrawTableHead'
export default {
    data(){
        return{
            //查询按钮的状态
            selectLoading:false,
            //导出按钮的状态
            downloadLoading:false,
            //导出excel文件的名字
            tableTitle:'中奖名单',
            //表格的高度
            height:null,
            //表格的每一列的宽度,若没有再表头设置则采用
            width:150,
            //总条目数
            total:null,
            //每页显示条目个数
            pageSize: 100,
            //每一页面的显示的条目个数数组
            pageSizes: [50, 100, 200, 300],
            //当前页数
            currentPage: 1,
            //表格的加载状态
            tableLoading: false,
            //查询条件
            form:{
                text1:null,
            },
            //后端给的数据
            tableData1:[],
            //表格渲染的数据
            tableData:[],
            //表格的表头数据
            tablehead:[],
        }
    },
    created(){
        this.tablehead = luckDrawTableHead.luckDrawTableHead;
        //动态监听页面的高度，如果改变则改变
        window.addEventListener("resize", this.getHeight);
        this.getHeight();
        this.initialization();
        this.changeList();
    },
    methods:{
        getHeight(){
            this.height = window.innerHeight - 200
        },
        initialization(){
           let arr;
            for(var i = 0 ;i<1000;i++){
                let num = i + 1;
                arr = {
                    prop1:'测试' + num,
                }
                this.tableData1.push(arr)
            }
            this.total = this.tableData1.length;
        },
        //查询事件
        selectClick(){
            this.selectLoading = true;
            console.log(this.form)
            this.selectLoading = false;
        },
        //行间样式
        tableRowStyle(){
           return 'background-color:#CCF1FF;color:#000;text-align:center;height:10px'
        },
        //表头样式
        tableHeaderColor(){
            return 'background-color:#0C2278;color:#fff;text-align:center;height:20px'
        },
        changeList(){
            if(this.tableData1.length){
                this.tableData = [];
                var x = (this.currentPage - 1) * this.pageSize;
                var y = this.currentPage * this.pageSize;
                if(x >= this.total){
                    x = this.total;
                }
                if(y >= this.total){
                    y = this.total
                }
                for(x;x<y;x++){
                    this.tableData.push(this.tableData1[x])
                }
            }
            this.tableLoading = false;
        },
        handleSizeChange(val) {
            this.tableLoading = true;
            this.pageSize = val
            this.changeList();
        },
        handleCurrentChange(val) {
            this.tableLoading = true;
            this.currentPage = val
            this.changeList();
        },
        exportData(){
            if(this.tableData.length){
                let tHeader = [];
                let filterVal = [];
                this.tablehead.filter( (item,i) =>{
                tHeader.push(item.label);
                    filterVal.push(item.prop);
                } )
                this.export2Excel(tHeader,filterVal,this.tableData);
            }else{
                this.$alert('没有查询到数据，不能使用导出功能', '提示', {
                    confirmButtonText: '确定',
                    callback: action => {
                    }
                });
            }
        },
        export2Excel(tHeader,filterVal,dataTabel) {
        var that = this;
        this.downloadLoading = true
        require.ensure([], () => {
            const { export_json_to_excel } = require("@/assets/excel/Export2Excel.js"); //这里必须使用绝对路径，使用@/+存放export2Excel的路径
            let list = dataTabel;
            let data = that.formatJson(filterVal, list);
            export_json_to_excel(tHeader, data, that.tableTitle); // 导出的表格名称
        });
        this.downloadLoading = false;
        },
        //3.格式转换
        formatJson(filterVal, jsonData) {
        return jsonData.map((v) => filterVal.map((j) => v[j]));
        },
    }
}
</script>

<style lang="scss">
    .luckDraw{
        .luckDraw_title{
            width: 100%;height: 100px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 46px;
            font-weight: 900;
            color: red;
                
        }
        .luckDraw_select{
            display: flex;
            align-items: center;
            width: 100%;height: 60px;
            padding-left: 50px;
            .el-input{
                width: 200px;
                margin-right: 20px;
            }
        }
        .fy{
            display: flex;
            align-items: center;
            height: 40px;
            width: 100%;
        }
    }
</style>