当先锋百科网

首页 1 2 3 4 5 6 7

VUE+elementUI前端分页，超详细！！！ 

	之前一直在后端进行分页，使用的java中的pageHelper分页插件，但是用起来不是感觉很好。
原因是：搜索和加载全部数据时，要区别是是搜索还是加载数据列表的状态。
如果使用前端分页，则没有这个问题。不闲聊，直接上代码---->

export default {
    data() {
        return {
            form: {
                searchContent: null
            },
            tableData: [],      // table数据列表
            totalPageData: [],  // 分页数据(全部数据已经分好页)
            pageNum: 1,         // 共几页
            pageSize: 10,        // 每页显示数量
            currentPage: 1,     // 当前显示页码
            total: 1,           // 总共多少条数据
            dataShow: [],       // 当前页要显示的数据
            
        };
    },
    created() {
        // this.fetchData();
        this.getTableData();

    },
    methods: {
        tableRowClassName({row, rowIndex}) {
            if (rowIndex % 2 == 1) {
                return "success-row";
            }
            return "";
        },

        // 获取table列表的信息
        getTableData() {
            this.$axios({
                url: "/api/kpi/intellectual/list",
                // url: "/kpi/intellectual/list",
                method: "get",
            }).then(response => {
                const resp = response.data.data;
                this.tableData = resp;
                this.total = resp.length;
                this.calcPageData();
            }).catch(error => {
                this.$message.error("数据加载失败!")
            })
            
        },
        search() {
            // 搜索时初始化参数
            this.pageSize = 10;
            this.currentPage = 1;
            const data = {
                "content": this.form.searchContent
            }
            if (data.content == null || data.content == '') {
                this.$message({
                    type: "warning",
                    message: "搜索内容不能为空!"
                })
                return ;
            }
            this.$axios({
                url: "/api/kpi/intellectual/search",
                // url: "/kpi/intellectual/search",
                method: "post",
                data: data
            }).then(response => {
                const resp = response.data;
                // console.log("resp: " + JSON.stringify(resp))
                this.tableData = resp.data;
                this.total = resp.data.length;
                this.calcPageData();
            }).catch(error => {
                this.$message.error("搜索的内容不存在!")
            })
        },
        // 计算页数的方法
        calcPageData() {
            // 计算页数，根据后台数据的条数和每页要显示的数量算出一共多少页，得0时设为1
            if(this.tableData.length > 1) {
                this.pageNum = Math.ceil(this.tableData.length / this.pageSize) || 1;
                // console.log("总页数：" + this.pageNum);
            }
            //数据分组
            for (let i = 0; i < this.pageNum; i++) {
                // 每页相当于一个数据，例如：[[],[],[]]
                // 根据每页显示数量，将后台的数据分割到每一页，假设pageSize为5，则第一也为1-5条slice(0,5),slice(5,10)...
                this.totalPageData[i] = this.tableData.slice(this.pageSize * i, this.pageSize * (i+1));
            }

            // 获取到数据后显示第一页内容，数组下标是从0开始的，这里一定 要减去1，不然会丢失一组数据
            this.dataShow = this.totalPageData[this.currentPage - 1];
        },
        handleSizeChange(val) {
            this.pageSize = val;
            // console.log("一页显示多少条：" + val);
            // 重新计算页数并分组
            this.calcPageData();
        },

        handleCurrentChange(val) {
            this.currentPage = val;
            // 注意数组是从0开始，页码别忘了减去1
            this.dataShow = this.totalPageData[val - 1];
            // console.log("第几页： " + val)
        },
        //页面显示条数改变是触发
        handleSizeChange1(val) {
            this.pageSize = val;
            //重新加载数据
            this.fetchData();
        },
        //点击分页的页码时触发
        handleCurrentChange1(val) {
            this.currentPage = val;
            //重新加载数据
            this.fetchData();
        },
        
        // 重置时重新加载数据,每页条数，以及当前页需要初始化
        reset() {
            this.getTableData();
            this.pageSize = 10;
            this.currentPage = 1;
            this.form.searchContent = null;
        }
    },
    filters: {
        //文件提交的状态
        stateFilter(type) {
            const sF = state.find(obj => obj.type === type);
            return sF ? sF.name : null;
        },
    }
};

前端代码部分：

<saice-row>
    <saice-table 
        :data="dataShow" 
        style="width: 100%;" 
        border 
        :row-class-name="tableRowClassName"
        :header-cell-style="{background:'#eef1f6', color: '#606266'}">
        <saice-table-column type="index" label="序号" width="60"></saice-table-column>
        <!-- <saice-table-column prop="businessId" label="业务标识" width=""></saice-table-column> -->
        <saice-table-column prop="typeName" label="知识产权类型" sortable>
        </saice-table-column>
        <saice-table-column prop="fileName" label="文件名称" sortable>
            <template slot-scope="scope">
                <a :href="'/api/kpi/intellectual/download?id='+scope.row.fileId">{{scope.row.fileName}}</a>
            </template>
        </saice-table-column>
        <saice-table-column prop="name" label="申请人" sortable></saice-table-column>
        <saice-table-column prop="participateUser" label="参与人" sortable></saice-table-column>
        <saice-table-column prop="applyDate" label="申请时间" sortable></saice-table-column>
        <!-- <saice-table-column prop="assessName" label="审核人" sortable></saice-table-column> -->
        <!-- <saice-table-column prop="assessDate" label="审核时间" sortable></saice-table-column> -->
        <saice-table-column prop="state" label="状态" width="100">
            <template slot-scope="scope">
                <saice-tag type="primary">
                    <span>{{ scope.row.state | stateFilter }}</span>
                </saice-tag>
            </template>
        </saice-table-column>
    </saice-table>
</saice-row>

<!-- 分页 -->
<saice-row style="margin-top: 8px; margin-bottom: 10px; height: 30px;">
    <saice-col :span="12" :offset="0">
        <!-- pageSize(每页条数),改变时会触发 
            currentPage(当前页)改变时会触发
        -->
        <saice-pagination
            @size-change="handleSizeChange" 
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 50]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </saice-pagination>
    </saice-col>
</saice-row>

需要注意的是：
table表显示的数据是dataShow，指的是当前的数据，所以你在给表赋值的时候别弄错了，–>:data="dataShow"

上面代码比较长，不必关注其余的代码，只需要将前端分页的函数学会即可。
参考网站：
https://blog.csdn.net/zxcbnm7089/article/details/111547368