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>