已经封装好的

<template>
    <div>
        <i-table
            :loading="loading"
            :columns="columns"
            :data="data"
            @on-select="onSelect"
            @on-select-cancel="onSelectCancel"
            @on-select-all="onSelectAll"
            @on-select-all-cancel="onSelectAllCancel"
        />
        <i-page
            :total="total"
            :current="page"
            :page-size="size"
            flex="main:center"
            class="c-gap-top"
            show-total
            @on-change="changePage"
        />
    </div>
</template>

<script>
import iTable from '@components/table';
import iPage from '@components/page';
/**
 * 案例：
 *  <i-select-table
        ref="selectTable"
        :data="data"               // 数据
        :loading="loading"         // 加载动画
        :columns="columns"         // 页面数据
        :total="total"             // 总条数
        :page="curPage"            // 当前页数
        :size="pageSize"           // 当前显示几条
        val="deptCode"             // 全选时数据唯一
        type=""                    // 当前页全选还是全部数据全选，默认全部数据
        @changePage="changePage"   // 返回的当前选择页数
        @selectData="selectData"   // 返回选中的所有数据
        @tableList="tableList"     // 与type关联，当type不为空时返回全部数据，需调用该方法获取数据传递
    />
    changePage(num) => {}
    selectData(list) => {}
    tableList() => {调list接口，成功后：this.$refs.selectTable.tableList(list);}
 * 重要：
 * 需要全选时需要在getList调用
 * this.$refs.selectTable.handleTableChecked(获取到的数据);
 */
export default {
    components: {
        iTable,
        iPage,
    },
    props: {
        columns: {
            type: Array,
            default: () => [],
        },
        data: {
            type: Array,
            default: () => [],
        },
        loading: {
            type: Boolean,
            default: true,
        },
        page: { // 当前页数
            type: Number,
            default: 1,
        },
        size: { // 当前显示几条
            type: Number,
            default: 10,
        },
        total: { // 总页数
            type: Number,
            default: 1,
        },
        val: { // 全选时数据唯一
            type: String,
            default: '',
        },
        type: { // 当前页全选还是全部数据全选，默认全部数据
            type: String,
            default: '',
        },
    },
    data() {
        return {
            selectList: [],
            tempArr: [],
        };
    },
    methods: {
        changePage(index) {
            this.$emit('changePage', index);
        },
        onSelect(selection, row) {
            this.selectList.push(row); // 将该条数据添加到tempArr中
            this.data.forEach(item => { // 本页数据中找到该条勾选数据并添加属性_checked = true
                if (item[this.val] === row[this.val]) {
                    item._checked = true;
                };
            });
        },
        onSelectCancel(selection, row) {// tempArr中找到该条数据并删除
            this.selectList.forEach((item, index) => this.tDelete(item, row, index));
        },
        // 全选
        onSelectAll(all) {
            this.type ? this.$emit('tableList') : this.handle(all);
        },
        tableList(all) {
            this.handle(all);
        },
        // 取消全选
        onSelectAllCancel() {
            this.tempArr.forEach(item => { // tempArr中找到该条数据并删除
                this.selectList.forEach((key, index) => this.tDelete(item, key, index));
            });
        },
        handleTableChecked(data) {
            this.selectList.forEach(item => { // 判断本页数据状态
                data.forEach(every => {
                    if (item[this.val] === every[this.val]) {
                        every._checked = true;
                    };
                });
            });
        },
        // 删除
        tDelete(item, key, index) {
            if (item[this.val] === key[this.val]) {
                this.selectList.splice(index, 1);
            };
        },
        // 数据处理
        handle(all) {
            const newArr = {};
            const that = this;
            this.tempArr = all;
            this.selectList = all.map(item => item); // 将本页全部勾选添加到tempArr中
            this.selectList = this.selectList.reduce(function (item, next) { // 去重
                newArr[next[that.val]] ? '' : newArr[next[that.val]] = true && item.push(next);
                return item;
            }, []);
        },
    },
    watch: {
        selectList(item) {
            this.$emit('selectData', item);
        },
    },
};
</script>

没封装的

<i-table
    stripe ref="selection"
    :columns="columns"
    :data="dataList"
    :loading="loading"
    @on-select="onSelect"
    @on-select-cancel="onSelectCancel"
    @on-select-all="onSelectAll"
    @on-select-all-cancel="onSelectAllCancel"
/>
<i-page
    :total="total"
    :current="curPage"
    :page-size="pageSize"
    flex="main:center"
    class="c-gap-top"
    show-total
    @on-change="changePage"
></i-page>

data() {
	return {
            total: 0,
            curPage: 1,
            pageSize: 10,
            dataList: [],
            selectList: [],
            gdatalist: [],
            tempArr: [], // 记录已经勾选的数据
        };
},
methods: {
    onSelect(selection, row) {
        this.tempArr.push(row); // 将该条数据添加到tempArr中
        this.dataList.forEach(item => { // 本页数据中找到该条勾选数据并添加属性_checked = true
            if (item.doctor_id === row.doctor_id) {
                item._checked = true;
            };
        });
    },
    onSelectCancel(selection, row) {
        this.tempArr.forEach((item, index) => { // tempArr中找到该条数据并删除
            if (row.doctor_id === item.doctor_id) {
                this.tempArr.splice(index, 1);
            };
        });
    },
    async onSelectAll(selection) {
        const {
            data,
            status
        } = await this.$http.post(Api.doctorStatus, {
            ...this.g_params(), // 参数
            page: 1,
            size: 10000000,
        }, {
            headers: {
                'Content-type': 'application/json'
            },
        });
        if (+status === 0) {
            this.gdatalist = data.List;
            this.gdatalist.forEach(item => { // 将本页全部勾选添加到tempArr中
                this.tempArr.push(item);
            });
            this.tempArr = Array.from(new Set(this.tempArr)); // 去重
        }
    },
    onSelectAllCancel(selection) {
        this.gdatalist.forEach(item => { // tempArr中找到该条数据并删除
            this.tempArr.forEach((e, index) => {
                if (item.doctor_id === e.doctor_id) {
                    this.tempArr.splice(index, 1);
                };
            });
        });
    },
    handleTableChecked(datas) {
        this.tempArr.forEach(item => { // 判断本页数据状态
            datas.forEach(e => {
                if (item.doctor_id === e.doctor_id) {
                    e._checked = true;
                };
            });
        });
    },
    // 获取数据
    async getList() {
        const {data, status} = await this.$http.post(Api.doctorStatus, {
                ...this.g_params(), //参赛
                size: this.pageSize,
                page: this.curPage,
            },
            {
                headers: {
                    'Content-type': 'application/json'
                },
            },
        );
        if (+status === 0) {
            this.dataList = data.List != null ? data.List : [];
            this.handleTableChecked(this.dataList); // 判断页面每一条数据是否选中
            this.total = data.total_count;
        };
    },
}