Element-table表格多选的使用

最新推荐文章于 2024-09-13 11:45:14 发布

无语听梧桐

最新推荐文章于 2024-09-13 11:45:14 发布

阅读量1.1w

点赞数 6

分类专栏： vue

本文链接：https://blog.csdn.net/weixin_36894745/article/details/104700124

版权

vue 专栏收录该内容

12 篇文章 1 订阅

订阅专栏

需求

如图所示：左边是一个可以多选的表格，右边需要实时展示选中的数据。
需要实现：

表格中的数据选中或取消选中时，右边需要实时展示。
右边删除某一项时，表格中对应的那一项需要取消选中。
切换页数的时候，之前列表的是否选中状态需要回显。

踩坑
第一次阅读文档，使用的是selection-change的事件，该事件是在 选择项发生变化时会触发该事件，所以当进行切换页数时，tableData中的数据重新渲染，选择的项就变为空，无法对之前选择的数据就想保存。
解决
再次阅读文档，发现了另一个事件，select，会在用户手动勾选数据行的进行触发，可以把用户选择的数据暂存起来，然后通过toggleRowSelection方法来控制点击行的选中与否。

布局

            <el-row :gutter="30">
                <el-col :span="16">
                    <el-table :data="tableData.list" border @select="handleSelect" ref="multipleTable" @select-all="handleSelectAll">
                        <el-table-column type="selection"></el-table-column>
                        <el-table-column prop="advertiserId" label="子账户ID"></el-table-column>
                        <el-table-column prop="advertiserName" label="子账户名称" min-width="180px"></el-table-column>
                        <el-table-column prop="name" label="邮箱"></el-table-column>
                        <el-table-column prop="company" label="使用人员"></el-table-column>
                    </el-table>
                    <div class="text-center mar-top-20">
                        <el-pagination background layout="total, prev, pager, next" :total="tableData.totalCount" :page-size="pageSize" :current-page="pageNo" @current-change="goPage">
                        </el-pagination>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="right">
                        <div class="title">已选<span class="clear" @click="handleCLearAll">清空全部</span></div>
                        <template v-if="selectedAccount.length > 0">
                            <div class="one-selected" v-for="(item, index) in selectedAccount" :key="index">
                                <span>{{item.advertiserName}}</span>
                                <span @click="cancelSelect(item, index)">X</span>
                            </div>
                        </template>
                        <div v-else class="no-selected">暂无选择</div>
                    </div>
                </el-col>
            </el-row>Ï

data中定义数据分别是：

// 表格数据
tableData: {},
// 页数
pageNo: 1,
// 每页显示条目个数
pageSize: 6,
// 二位数组，暂存每页点击过的数据
stateArr: [],
// 已经选择的数据，在右边渲染
selectedAccount: [],

处理事件：

       // 清空全部
        handleCLearAll() {
            this.stateArr[this.pageNo - 1] && this.stateArr[this.pageNo - 1].forEach(item => {
                this.$refs.multipleTable.toggleRowSelection(this.tableData.list[item.index], false)
            })
            this.stateArr = Array(this.totalPage).fill([])
            this.selectedAccount = []
        },
        // 选择事件
        handleSelect(selection, row) {
            this.stateArr[this.pageNo - 1] = selection
            this.selectedAccount = this.stateArr.flat()
        },
        // 取消选择
        cancelSelect(item, index) {
            this.selectedAccount.splice(index, 1)
            const stateArrIndex = this.stateArr[this.pageNo - 1].findIndex(el => el.index === item.index)
            this.stateArr[this.pageNo - 1].splice(stateArrIndex, 1)
            this.$refs.multipleTable.toggleRowSelection(this.tableData.list[item.index], false)
        },
        // 回显数据，调用的地方是在获取分页数据之后
        showPreSelected(page) {
            // $nextTick在下次dom更新循环结束之后回调，在修改数据之后使用，在回调中可获取更新后的Dom
            this.$nextTick(() => {
                this.stateArr[page - 1] && this.stateArr[page - 1].forEach(item => {
                    this.$refs.multipleTable.toggleRowSelection(this.tableData.list[item.index], true)
                })
            })
        },

需要注意的点