table选择人员切换分页支持回显

示例图片

需求

• 上方区域展示已选择账号姓名，点击x可以删除
• 下方表格选择人员，可选择多个，分页切换支持回显

<template>
    <el-dialog
        title="选择人员"
        :visible.sync="dialogVisible"
        append-to-body width="700px">
        <div class="">
            <el-tag v-for="(item, idx) in user_check_list" :key="idx" closable @close="handleClose2(idx)" class="tag_style">{{ item }}</el-tag>
            <br>
            <hr>
            <br>
            <el-row :gutter="20">
                <el-col :span="10">
                    <el-input v-model="search_account" placeholder="请输入账号"></el-input>
                </el-col>
                <el-col :span="2">
                    <el-button type="primary" icon="el-icon-search" @click="searchModel"></el-button>
                </el-col>
            </el-row>
            <br>
            <el-table :data="user_List" ref="multipleTable" border v-loading="Loading" @select="singleElection" class="tables">
                <el-table-column type="selection" width="55"></el-table-column>
                <template v-for="(col, index) in userTableColumns">
                    <el-table-column :key="index" :prop="col.prop" :label="col.label" :width="col.width" :formatter="col.formatter" v-bind="col" show-overflow-tooltip>
                    </el-table-column>
                </template>
            </el-table>
            <el-pagination background @current-change="handleCurrentChange" :current-page="pageNum" :page-size="5" :page-sizes="[5]" layout="total, prev, pager, next, jumper" :total="pageTotal">
            </el-pagination>
        </div>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="saveUser">保存</el-button>
        </div>
    </el-dialog>
</template>

export default {
    data () {
        return {
            // 选择人员
            userTableColumns: [
                {
                    label: '账号',
                    prop: 'username'
                },
                {
                    label: '角色',
                    prop: 'roleName'
                },
                {
                    label: '邮箱',
                    prop: 'email'
                }
            ],
            dialogVisible: false,
            search_account: '',
            user_List: [],
            multipleSelection: [],
            user_check_list: [],
            pageNum: 1,
            pageTotal: 0
        }
    },
    mounted () {
        this.getUserList()
    },
    methods: {
        async searchModel () {
            this.pageNum = 1;
            await this.getUserList();
        },
        getUserList () {
            const data = []
            /* const params = {
                pageNumber: this.pageNum,
                pageSize: 5,
                username: this.search_account
            };
            this.Loading = true;
            await this.$ajax(apiUserList, params).then(async (res) => {
                if (res.code === this.$OK) { */
                    const res = {
                        data: {
                            "list":[
                                {"pageNumber":null,"pageSize":25,"start":0,"isLimit":true,"id":271,"domainCode":"ABUP-OTA","createTime":null,"updateTime":null,"createUname":"xingquan","createRemark":null,"createUid":66,"orderField":"create_time","orderType":"desc","searchText":null,"token":null,"domainPlatform":"1","supplierUser":"","language":"cn","dataResources":[],"vehicleModelPermission":null,"username":"yi.xu4","email":"Yi.Xu4@lotuscars.com.cn","roleName":"测试角色"},{"pageNumber":null,"pageSize":25,"start":0,"isLimit":true,"id":270,"domainCode":"ABUP-OTA","createTime":null,"updateTime":null,"createUname":"xingquan","createRemark":null,"createUid":66,"orderField":"create_time","orderType":"desc","searchText":null,"token":null,"domainPlatform":"1","supplierUser":"","language":"cn","dataResources":[],"vehicleModelPermission":null,"username":"e-qiong.zheng","email":"e-qiong.zheng@geely.com","roleName":"超级管理员"},{"pageNumber":null,"pageSize":25,"start":0,"isLimit":true,"id":269,"domainCode":"ABUP-OTA","createTime":null,"updateTime":null,"createUname":"xingquan","createRemark":null,"createUid":66,"orderField":"create_time","orderType":"desc","searchText":null,"token":null,"domainPlatform":"1","supplierUser":"","language":"cn","dataResources":[],"vehicleModelPermission":null,"username":"zhangweiwei2","email":"ww18339806556@163.com","roleName":"超级管理员"},{"pageNumber":null,"pageSize":25,"start":0,"isLimit":true,"id":268,"domainCode":"ABUP-OTA","createTime":null,"updateTime":null,"createUname":"xingquan","createRemark":null,"createUid":66,"orderField":"create_time","orderType":"desc","searchText":null,"token":null,"domainPlatform":"1","supplierUser":"","language":"cn","dataResources":[],"vehicleModelPermission":null,"username":"zhangweiwei1","email":"2220605506@qq.com","roleName":"超级管理员"},{"pageNumber":null,"pageSize":25,"start":0,"isLimit":true,"id":267,"domainCode":"ABUP-OTA","createTime":null,"updateTime":null,"createUname":"xingquan","createRemark":null,"createUid":66,"orderField":"create_time","orderType":"desc","searchText":null,"token":null,"domainPlatform":"1","supplierUser":"","language":"cn","dataResources":[],"vehicleModelPermission":null,"username":"wsl1234","email":"wangshunli@abupdate.com","roleName":"测试角色"}
                            ],
                            "total":161
                        }
                    }
                    this.user_List = await res.data.list;
                    this.pageTotal = res.data.total;
                    setTimeout(() => {
                        if (this.isFirst) {
                            this.isFirst = false
                        } else {
                            this.$refs.multipleTable.clearSelection();
                        }
                        this.setCheck();
                    }, 100)
                /* }
                this.Loading = false;
            }); */
        },
        setCheck () {
            const checkArr = this.user_check_list;
            if (!checkArr) return;
            if (!checkArr?.length) return;
            this.user_List.map((val) => {
                checkArr.map((item) => {
                    if (val.username == item) {
                        this.$refs.multipleTable.toggleRowSelection(val, true);
                    }
                });
            });
        },
        handleCurrentChange (val) {
            this.pageNum = val;
            this.getUserList();
        },
        singleElection (selection, row) {
            this.multipleSelection = selection;
            if (selection.length) {
                const type = this.checke_user_type;
                const arr = this.multipleSelection.map(
                    (val) => val.username
                );
                const temp = this.user_check_list.concat(arr);
                this.user_check_list = [ ...new Set(temp) ];
                if (
                    row.username != selection[selection.length - 1].username
                ) {
                    const idx = this.user_check_obj[type].indexOf(
                        row.username
                    );
                    this.user_check_obj[type].splice(idx, 1);
                }
            } else {
                this.user_check_list = [];
            }
        },
        handleClose2 (idx) {
            this.user_check_list.splice(idx, 1);
            const checkArr = this.user_check_list;
            this.$refs.multipleTable.clearSelection();
            if (!checkArr.length) return;
            this.$nextTick(() => {
                this.user_List.map((val) => {
                    checkArr.map((item) => {
                        if (val.username == item) {
                            this.$refs.multipleTable.toggleRowSelection(val, true);
                        }
                    });
                });
            });
        },
        saveUser () {
            console.log(this.user_check_list)
        },
    }
}