element 分页 组件 使用存在BUG完善

<template>
    <el-card>
        <el-col>
            <el-button @click="searchClicks()" type="primary" size="mini" plain>查询</el-button>
        </el-col>
        <el-table
            :data = "tableList"
            v-loading="loading"
            border
            style="width: 100%"
            empty-text="暂无数据"
            :cell-style="{padding: 0}"
        >
            <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
            <el-table-column prop="name" label="姓名" align="center"></el-table-column>
            <el-table-column prop="sex" label="性别" align="center"></el-table-column>
        </el-table-column>
        <el-pagination
            v-if = "paginationShow"
            @current-change="currentChange"
            @size-change="sizeChange"
            :current-page="currentPage"
            :page-size="pageSize"
            layout="total, prev, pager, next, jumper"
            :total="total"
        ></el-pagination>
    </el-card>
</template>
<script>
export default {
    data() {
        return {
            // 页容量
            pageSize: 10,
            // 当前页
            currentPage: 1,
            // 数据的总条数
            total: 0,
            // 控制分页的显示隐藏达到刷新的效果
            paginationShow: true
        }
    },
    methods: {
        // 当页容量发生变化时触发
        sizeChange(size) {
            this.pageSize = size;
            // 重新请求数据
            this.searchClick();
        },
        // 当页数发生变化时触发
        currentChange(num) {
            this.currentPage = num;
            // 重新请求数据
            this.searchClick();
        },
        // 查询方法
        searchClicks() {
            this.paginationShow = false;
            this.currentChange(1);
            this.$nextTick(() => {
                this.paginationShow = true;
                this.searchClick();
            })
        },
        searchClick() {
            var res = this.$http.request({
                url: `/dsjfnnjns`,
                data: {
                    // 这是后台要的参数  自己参考具体情况
                    currentPage: this.currentPage,
                    pageSize: this.pageSize
                }
            }).then(res => {
                var data = res.data;
                if(data.status === '200') {
                    // 这里写自己要操作的方法(比方说从新赋值给table  :data的值)
                }
            })
        }
    },
    computed: {
        totalNum() {
            return this.total;
        }
    },
    watch: {
        // 监听总条数,每次查询将当前页置为 1
        totalNum(val) {
            if(val == (this.currentPage - 1) * this.pageSize && val != 0) {
                this.currentPage -= 1;
                this.searchClick(this);
            }
        }
    }
}
</script>