el-table分頁多選及回顯方式

更新時(shí)間：2026年01月22日 10:37:59 作者：四木Zhang

這篇文章主要介紹了el-table分頁多選及回顯方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

使用e-table分頁多選，回顯

很多次碰到要做表格多選加分頁的，在這里記錄一下

主要需求

表格要求可以多選，可以分頁
選擇數(shù)據(jù)之后，切換分頁數(shù)據(jù)仍存在，再次切換回去，能正常回顯

功能展示

左側(cè)為table表格，右側(cè)是已選擇的展示

首頁選擇人員

第二頁選擇人員，第一頁選擇的數(shù)據(jù)仍在

切換回第一頁，正?；仫@數(shù)據(jù)

選擇的數(shù)據(jù)傳遞到界面

再次打開彈窗，數(shù)據(jù)仍正常回顯

具體實(shí)現(xiàn)

首先，給表格添加分頁與選擇功能

<!-- table表頭設(shè)置row-key,需要唯一標(biāo)識(shí) -->
<el-table :row-key="(row) => { return row.userId }" ></el-table>
    
<!-- 添加多選，設(shè)置type="selection" -->
<el-table-column type="selection" width="55" :reserve-selection="true">
</el-table-column>

<!-- 添加分頁組件 -->
<el-pagination :page-sizes="[10, 50, 100]" :currentpage="Number(form.pageNum)" :page-size="Number(form.pageSize)" :total="Number(form.total)" layout="prev,pager,next,sizes,jumper" @size-change="onSizeChange"
@current-change="onCurrentChange" />

表格做了分頁功能，切頁會(huì)請(qǐng)求后臺(tái)，之前選擇的的數(shù)據(jù)的勾選狀態(tài)就不存在了，element提供了reserve-selection可以保存數(shù)據(jù)更新前選中的值，這個(gè)屬性需要搭配 row-key 指定一個(gè)唯一標(biāo)識(shí)。所以要在表格多選列設(shè)置reserve-selection='true'

當(dāng)設(shè)置了row-key和reserve-selection基本就成了

使用selection-change函數(shù)記錄勾選的值

selection-change：當(dāng)選項(xiàng)發(fā)生變化時(shí)會(huì)觸發(fā)該函數(shù)

<el-table @selection-change="handleSelectionChange" ></el-table>

//selectList為勾選的值組成的數(shù)組
handleSelectionChange(arr) {
      this.selectList = arr
}

回顯數(shù)據(jù)：

通過element提供的內(nèi)置函數(shù)toggleRowSelection()來實(shí)現(xiàn)我們的數(shù)據(jù)回顯

//給table設(shè)置ref屬性
<el-table ref="multipleTable" :data="tableData"></el-table>

//數(shù)據(jù)回顯
toggleSelection(rows) {
    //使用$nextTick，保證dom已經(jīng)更新
    this.$nextTick(() => {
        setTimeout(() => {
            //保證有值再進(jìn)行比對(duì)，避免報(bào)錯(cuò)
            if (rows && this.tableData.length != 0) {
                //遍歷table表格數(shù)據(jù)與要回顯的數(shù)組比對(duì)，匹配成功的設(shè)置為選中狀態(tài)
                this.tableData.forEach((row) => {
                    rows.forEach((item) => {
                        if (row.userId == item.userId) {
                            //判斷唯一標(biāo)識(shí)，若是id一樣，則設(shè)置該行選中狀態(tài)為true
                            this.$refs.multipleTable.toggleRowSelection(row, true)
                        }
                    })
                })
            } else {
                this.$refs.multipleTable.clearSelection();
            }
        }, 0);
    });
}

注意：因?yàn)槲覀冞@里做了分頁，分頁時(shí)會(huì)重新請(qǐng)求后臺(tái)，所以每次請(qǐng)求后要調(diào)用一次toggleSelection函數(shù)來回顯當(dāng)前頁的數(shù)據(jù)

至此，我們表格的分頁多選回顯功能就做的差不多了

完整代碼

僅供參考

<el-table :data="tableData" @row-click="rowClick" @selection-change="handleSelectionChange" ref="multipleTable" stripe border style="width: 100%" :row-key="(row) => { return row.userId }" height="calc(100% - 48px)">
	<el-table-column type="selection" width="55" :reserve-selection="true">
    </el-table-column>
    <el-table-column type="index" label="序號(hào)" align="center" width="50px">
        <template slot-scope="scope">
            {{ (form.pageNum - 1) * form.pageSize + scope.$index + 1 }}
         </template>
     </el-table-column>
     <el-table-column align="center" label="姓名" prop="userName" />
</el-table>
<el-pagination :page-sizes="[50, 100, 1000, 2000]" :current-page="Number(form.pageNum)"  :page-size="Number(form.pageSize)" :total="Number(form.total)" layout="prev,pager,next,sizes,jumper" @size-change="onSizeChange"  @current-change="onCurrentChange" />

<script>
export default {
	data() {
        return {
            tableData: [],//表格table
            form: {
                pageNum: 1,
                pageSize: 50,
                total: 0,
            },
            selectList: [],//選中的list
        };
    },
    mounted() {
        this.getList()
    },
    methods: {
        // 獲取列表
        async getList() {
            let { rows, total } = await user_list(this.form);
            this.tableData = rows;
            this.form.total = total
            this.toggleSelection(this.selectList)
        },
        // 選擇人員發(fā)生變化時(shí)
        handleSelectionChange(arr) {
            this.selectList = arr
        },
        // 數(shù)據(jù)回顯
        toggleSelection(rows) {
            this.$nextTick(() => {
                setTimeout(() => {
                    if (rows && this.tableData.length != 0) {
                        this.tableData.forEach((row) => {
                            rows.forEach((item) => {
                                if (row.userId == item.userId) { this.$refs.multipleTable.toggleRowSelection(row, true)
                                }
                            })
                        })
                    } else {
                        this.$refs.multipleTable.clearSelection();
                    }
                }, 0);
            });
        },
        //分頁
        onSizeChange(size) {
            this.form.pageSize = size
            this.getList();
        },
        onCurrentChange(current) {
            this.form.pageNum = current
            this.getList();
        },
    },
}   
</script>

補(bǔ)充

做好之后，發(fā)現(xiàn)是存在一些bug的

初次數(shù)據(jù)回顯時(shí)，會(huì)觸發(fā)handleSelectionChange函數(shù)，導(dǎo)致傳入的list被覆蓋修改，切換分頁時(shí)后面的數(shù)據(jù)已經(jīng)不存在了

解決方案：data中添加一個(gè)flag變量來判斷編輯回顯

falg:false,
    
handleSelectionChange(arr) {
    if (this.falg) return
    this.selectList = arr
},
toggleSelection(rows) {
    this.$nextTick(() => {
        setTimeout(() => {
            this.rowSelectFlag = true
            ... 
            this.rowSelectFlag = false
        }, 0);
    });
},

回顯數(shù)據(jù)后進(jìn)行修改數(shù)據(jù)，只會(huì)保存當(dāng)前頁的數(shù)據(jù)，其他分頁的數(shù)據(jù)被刷掉