随笔- 105 文章- 0 评论- 12 阅读- 26万

三十九、vue中element最原始的分页（未封装的）

html<br><el-table ref="scoreUserTable" :data="scorePageUser.slice((currentPage1-1)*pageSize1,currentPage1*pageSize1)" tooltip-effect="light" size="mini" id="out_table3" <br>style="width: 100%" border></el-table>
 
<div style="text-align: center;">
    <el-pagination v-show="show1" background @size-change="handleSizeChange1" @current-change="handleCurrentChange1" :current-page="currentPage1" :page-sizes="[5, 10, 15, 20]" :page-size="pageSize1" layout="total, sizes, prev, pager, next, jumper" :total="scorePageUser.length">
    </el-pagination><br></div>

data() {
            return {
                activityId:'',
                scoreUserForm: {
                    name: '',
                },
                currentPage1: 1,
                pageSize1: 10,
                scorePageUser: [],
            }
        },
        //分页隐藏显示。无数据隐藏
        computed: {
            show1: function() {
                return this.scorePageUser.length == 0 ? false : true;
            }
        },
methods: {
this.getScoreData();
                }
 
getScoreData() {
                var name = this.scoreUserForm.name;
                this.getRequest("/publishActivity/getScoreInfo?id=" + this.activityId + "&name=" + name).then(resp => {
                    this.currentPage1 = 1;
                    this.scorePageUser = resp.data;
                })
            },