Element-table表格多选的使用

需求

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

• 表格中的数据选中或取消选中时，右边需要实时展示。

• 右边删除某一项时，表格中对应的那一项需要取消选中。

• 切换页数的时候，之前列表的是否选中状态需要回显。

  

  踩坑 第一次阅读文档，使用的是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)
                })
            })
        },

需要注意的点

1. 给tabley添加ref属性，用于获取真实dom
2. this.$nextTick在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

后记 上手写代码之前先想清楚，梳理一遍流程，会提高效率的哦～