element表格分页多选、全选

<el-table stripe :data="list" border style="width: 100%" tooltip-effect="dark" v-loading="loading"
            element-loading-text="数据正在加载中" ref="multipleTable"
            @select="onTableSelect" @select-all="onTableSelectAll">
                <el-table-column type="selection" width="55" align="center"></el-table-column>
                
            </el-table>
            <!-- 分页 -->
            <div class="el_page-box" style="text-align: right; margin-top: 10px;">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="currentPage" :page-sizes="pagesizeList" :page-size="pagesize"
                :layout="pageLayout" :total="total" :background=‘pageBackground‘>
                </el-pagination>
            </div>

<script>

export default {
    mixins: [pagingSearchCom, tableSelectCom],
    props: {
        checkList: {
            type: Array,
            default(){
                return []
            }
        },
    },
    created(){
        this.checkRowList = JSON.parse(JSON.stringify(this.checkList));
    },
    methods:{
        // 列表接口
        _requestPageList(pageData) {
            let data = {
                pageData,
                name: "",
            }
            let _this = this;
            this.loading = true;
            getUserPageListByDept(data).then(res => {
                if (res.data.returnResult == 200) {
                    this.loading = false;
                    this.list = res.data.returnData.data || []; //赋值列表数据
                    this.total = res.data.returnData.recordCount; //设置数据总数目！！！
                    this._toggleRowSelectionMixin();//mixins表格回显


                    return

                    // 以下是需要重置表格数据时写法（新增一个属性checkIn） -- 很少用到
                    let vcCheckInTypeList = [{id: 1},{id: 2}];
                    this.list = (res.data.returnData.data || []).map(e => {
                        let eIndex = _this.checkRowList.findIndex(ele => {return ele.id === e.id});
                        if(eIndex > -1){
                            e.checkIn = _this.checkRowList[eIndex].checkIn || vcCheckInTypeList[0];
                        } else {
                            e.checkIn = vcCheckInTypeList[0];
                        }
                        return e;
                    }); //赋值列表数据
                    this.total = res.data.returnData.recordCount; //设置数据总数目！！！
                    this._toggleRowSelectionMixin(true);//mixins表格回显
                }
            })
        }
    }
}
</script>

import { pagingSearchCom } from ‘@/components/mixins/pagingSearch‘;

// import { pagingSearchCom } from ‘@/components/mixins/pagingSearch‘
// mixins: [pagingSearchCom],

// 分页、查询 -- 封装在mixins里
import { mapState } from ‘vuex‘
export const pagingSearchCom = {
    data(){
        return {
            loading: false,
            list: [], //列表数据
            currentPage: 1, //当前页数
            pagesize: 10, //每页显示多少条
            pagesizeList: [10, 20, 30, 40, 50],
            pageLayout: "total, sizes, prev, pager, next, jumper",
            pageBackground: true,
            total: 0, //默认数据总数
            isCreated: false
        }
    },
    methods: {
        // 页码
        _getMixinsList(currentPage = this.currentPage, pagesize = this.pagesize) {
            this.currentPage = currentPage;
            this.pagesize = pagesize;
            this._requestPageList({
                pageNo: currentPage,
                pageSize: pagesize,
            })
        },
        // 列表接口
        _requestPageList(pageData) {},
        // 分页
        handleSizeChange(size) {
            this.pagesize = size;
            this._getMixinsList(1, size)
            //console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(currentPage) {
            this._getMixinsList(currentPage)
            //console.log(`当前页: ${val}`);
        },
        //查询数据
        searchDataMixin() {
            // console.log(‘查询成功‘)
            this._getMixinsList(1)
        },
    },
    created() {
        if(this.isCreated){
            return
        }
        this._getMixinsList();
    },
    computed: {
        // 通过VUEX动态计算表格的高度
        ...mapState({
            tableHeight: state => state.searchCriteria.contentBoxHeight - 180
        })
    }
}

// import { tableSelectCom } from ‘@/components/mixins/tableSelect‘
// mixins: [tableSelectCom],

export const tableSelectCom = {
    data(){
        return {
            checkRowList: [],
            innerVisible: true,
        }
    },
    methods: {
        closeEvt(){
            this.innerVisible = true;
            this.$emit(‘confirmEvt‘);
        },
        submitEvt(){
            this.$emit(‘confirmEvt‘, true, this.checkRowList);
        },
        // 取消默认选中项(单个勾选)
        /**
         *checkRowList 接口返回的默认勾选数组
        *id 列表唯一标识
        */ 
       onTableSelect (rows, row) {
            // console.log(rows,‘rows‘,row,‘row‘)
            if (!rows.includes(row)) {
                const index = this.checkRowList.findIndex(item => {return item.id === row.id});
                this.checkRowList.splice(index, 1)
            } else {
                this.checkRowList.push(row)
            }
        },
        // 全选操作
        onTableSelectAll (arr) {
            // console.log(arr,‘全选or取消全选‘)
            if (!arr.length) { // 直接取消选中全部
                this.list.forEach((v) => {
                    const index = this.checkRowList.findIndex(i => {return i.id === v.id})
                    if (index !== -1) {
                        this.checkRowList.splice(index, 1)
                    }
                })
            } else { // 直接选中全部
                this.list.forEach((v) => {
                    const index = this.checkRowList.findIndex(i => { return i.id === v.id })
                    if (index === -1) {
                        this.checkRowList.push(v)
                    }
                })
            }
        },
        _toggleRowSelectionMixin(isCheck = false){
            let _this = this;
            this.list.forEach(e => {
                let rIndex = _this.checkRowList.findIndex(ele => {return ele.id === e.id});
                if(rIndex > -1){
                    if(isCheck){
                        // 如果列表的值可以改变，需要重新勾选以绑定改变的值
                        _this.checkRowList.splice(rIndex,1, e);
                    }

                    _this.$nextTick(() => {
                        _this.$refs.multipleTable.toggleRowSelection(e, true);//这个就是回显的核心
                    })
                }
            })
        }
    }
}