el-table-column 多选 selection 展示数据及分页处理

1.实现效果

首先表格数据要有多选框

上面勾选的数据会在下面进行展示

下面表格支持单条移除操作
同时会根据临时勾选数据及之前已勾选的数据将数据赋值给上面表格的勾选框中

2. 代码

1.html代码 上边表格关键部分代码 及分页

<template  >
                    
                    <el-table border
                              ref="multipleTable"
                              :data="gameList"
                              :row-class-name="gameRowTableClass"
                              stripe
                              tooltip-effect="dark"
                              style="width: 100%"
                              :row-key="getRowKeys"
                              @selection-change="handleSelectionChange"
                               @sort-change="sort_change" 
                              >
                        <el-table-column
                                type="selection"
                                :reserve-selection="true"
                                width="55">
                        </el-table-column>
                        <el-table-column
                                type="index"
                                label="编号"
                                width="50">
                        </el-table-column>
                    <div>
                        <el-pagination
                                @size-change="handleSizeChange"
                                @current-change="handleCurrentChange"
                                :current-page="queryGameSelector.page"
                                :page-sizes="[5, 10,20,30]"
                                :page-size="queryGameSelector.pageSize"
                                layout="total, sizes, prev, pager, next"
                                :total="totalElements">
                        </el-pagination>
                    </div>

2.html 下边表格部分代码 已选游戏部分 精简代码 只保留关键部分

<template v-if="selectedGameList.length>0">
                    <h4>已经选择的游戏</h4>
                    <el-table border
                              :data="selectedGameList"
                              tooltip-effect="dark"
                              style="width: 100%">
                        <el-table-column
                                type="index"
                                label="编号"
                                width="50">
                        </el-table-column>
                        <el-table-column
                                prop="name"
                                label="游戏名称">
                        </el-table-column> 
                        <el-table-column
                                label="操作"
                                align="center">
                            <template slot-scope="scope">
                                <el-button size="mini" type="danger"
                                           @click.native.prevent="deleteRow(scope.$index, scope.row)">移除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </template>

3.data部分

                //最终选中的列表
                selectedGameList:[],
                //临时新增展示的列表
                tempSelectedGameList:[], 
                //判断是否进行监听selectedGameList 标志位
                flag: false,
                // 游戏选品  上边表格的数据结构
                queryGameSelector: {
                    "gameIds": [],
                    "categories": [],
                    "state": 1,
                    "startTime": '',
                    "endTime": '',
                    "subChannelIds": [],
                    "orderColumn": '',
                    "orderType": '',
                    "page": 1,
                    "pageSize": 10
                },
                

4.watch监听器部分

 watch:{

            tempSelectedGameList: {
                handler(val, oldVal) {
                    //console.log('tempSelectedGameList', val, oldVal)
                    //如果是加载数据阶段设置勾选时 不进行监听直接返回
                    if (!this.flag) return;
                    //新增数据判断
                    const isAdd = val.length > oldVal.length;
                    const oldArr = [], arr = [];
                    oldVal.forEach((item) => {
                        oldArr.push(item.id)
                    });
                    val.forEach((item) => {
                        arr.push(item.id)
                    });
                    //console.log('arr', oldArr, arr)
                    if (isAdd) {
                        let result = [];
                        arr.forEach(id => {
                            //把新增的数据项push进结果中 result
                            if (oldArr.indexOf(id) === -1) {
                                result.push(id)
                            }
                        });
                        result.forEach(id => {
                            //新数据中如果 id为新增数据项已经初始化之后了ranklabel 则添加到selectedGameList最终结果中
                            val.forEach((item) => {
                                if (item.id === id) this.selectedGameList.push(item)
                            })
                        })
                    } else {
                        //删除时
                        let result = [];
                        oldArr.forEach(id => {
                            //把删除的id找出来
                            if (arr.indexOf(id) === -1) {
                                result.push(id)
                            }
                        });
                        //把selectedGameList中对应resultId 删除
                        result.forEach(id => {
                            this.selectedGameList.forEach((item, index) => {
                                if (item.id === id) this.selectedGameList.splice(index, 1)
                            })
                        })
                    }
                }
            },
        },

5.methods部分—通用查询方法

             gameSelectorTemp() {
                //这个flag是设置watch监听事件 当跟新完当前页已选游戏标志位后再下一次渲染中设置为true
                this.flag = false
                //重要 这里是element分页的一个bug 在分页情况下切换已勾选页会重复添加已勾选数据 所以在这里清除全部勾选
;                this.gameList.forEach(item => {
                    this.$refs.multipleTable.toggleRowSelection(item,false);
                });
                gameMatchSelectorSearch(this.queryGameSelector).then(resp=>{
                    this.gameList=resp.data.info.content;
                    this.totalElements=resp.data.info.totalElements;
                    //获取已选中游戏id
                    const ids = [];
                    this.selectedGameList.length && this.selectedGameList.forEach(item => {
                        ids.push(item.id)
                    });
                    //临时temp数组
                    const tempSelectedGameList = [];
                    //console.log('xxxx', ids)
                    //判断当前页是否有已选中游戏 如果有设置已勾选
                    ids.length && this.gameList.forEach(item => {
                        if (ids.indexOf(item.id) > -1) {
                            tempSelectedGameList.push(item);
                            //设置勾选操作
                            this.$refs.multipleTable.toggleRowSelection(item,true);
                        }
                    });
                    //console.log('new page: ', tempSelectedGameList)
                    //赋值
                    this.tempSelectedGameList = tempSelectedGameList;
                    //渲染 并设置flag为true
                    this.$nextTick(() => this.flag = true)
                });
            },

6.method —selectChange方法
当上边表格勾选时会触发该操作 当手动进行赋值时也会触发该方法
这里是使用flag标志当手动进行赋值时不进行watch监听

            handleSelectionChange (val) {
                let _this  =this;
                //console.log('select', val)
                val.forEach(function (game) {
                    //设置默认值
                    _this.$set(game,'rank',0);
                    _this.$set(game,'label',0);
                    _this.selectedGameList.forEach(function (gameSelector) {
                        if (game.id === gameSelector.id){
                            _this.$set(game,'rank',gameSelector.rank);
                            _this.$set(game,'label',gameSelector.label)
                        }
                    })
                });
                _this.tempSelectedGameList=val
            },

7.method—删除操作方法

            deleteRow(index, row) {
                this.selectedGameList.splice(index, 1);
                this.gameList.forEach(item => {
                    if(item.id === row.id) {
                        this.$refs.multipleTable.toggleRowSelection(item,false);
                        this.tempSelectedGameList.forEach((game, index) => {
                            //如果删除的是临时的游戏选品 而不是已经选好的 需要清除对应templist
                            if (game.id === row.id) this.tempSelectedGameList.splice(index, 1)
                        })
                    }
                })
            },

感觉比较重要的就这些方法代码了
实际业务代码写了好多就没全贴上
有什么问题可以留言有时间会来回复
这里的watch监听部分代码还是前端室友大佬帮忙写的O(∩_∩)O哈哈~

3.参考资料

官方文档多选