The vue element form has its own full check box and the self-implemented multi-check box full select button.

use Vue + Element to make a complicated table, but when you turn the page, the bottom all is selected or selected, how to turn the page so that it is the same as the top display?

<el-table  ref="multipleTable" :data="tableData.slice((currentPage - 1) * pagesize,currentPage * pagesize)" border :row-key="getRowKeys" @selection-change="handleSelectionChange">
    <el-table-column type="selection" :reserve-selection="true" width="55"> </el-table-column>
    <el-table-column prop="number" label=""></el-table-column>
    <el-table-column label=""></el-table-column>
    <el-table-column label=""></el-table-column>
    <el-table-column label="/"></el-table-column>
    <el-table-column prop="tag" label=""></el-table-column>
    <el-table-column prop="sort" label=""></el-table-column>
    <el-table-column label="SKU"></el-table-column>
    <el-table-column prop="sale" label=""></el-table-column>
    <el-table-column label=""></el-table-column>
    <el-table-column label=""></el-table-column>
</el-table>
<el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="currentPage"
    background
    :page-sizes="[5, 10, 20, 30, 40]"
    :page-size="pagesize"
    layout="total, sizes, prev, pager, next, jumper"
    :total="tableData.length">    
</el-pagination>
    <div class="left-side">
        <el-checkbox :indeterminate="isIndeterminate" @change="handleCheckAllChange"></el-checkbox>
        <el-select v-model="value" placeholder="" class="select-input"></el-option>
        </el-select>
        <el-button size="mini" @click="onSubmit"></el-button>
    </div>
</el-row>

data(){
    return {
        checkAll: false,
        isIndeterminate: false,
        multipleSelection: [],
        tableData: [],
        currentPage: 1,
        pagesize: 10,
        page: 1
    }
},

methods: {
    getRowKeys(row) {
        return row.number
    },
    handleSelectionChange(val) {
        let vlength = val.length
        this.multipleSelection = val
        this.checkAll = vlength === this.pagesize
        this.isIndeterminate = vlength > 0 && vlength < this.pagesize
    },
    handleCheckAllChange() {
        this.$refs.multipleTable.toggleAllSelection()
        this.isIndeterminate = false
    },
    handleSizeChange(psize) {
        this.pagesize = psize
    },
    handleCurrentChange(cpage) {
        this.currentPage = cpage
    },

just when you turn the page, the bottom all or the selected state, how to turn the page so that it is the same as the top display?

Element

Mar.14,2022

computed: { indeterminate(){ return this.multipleSelection.length && this.multipleSelection.length < this.tableData3.length }, checked: { get() { return this.multipleSelection.length === this.tableData3.length }, set(val) { this.$refs.multipleTable.toggleAllSelection(val) } } },