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

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

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

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

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

主要需求

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

功能展示

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

首頁選擇人員

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

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

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

再次打開彈窗，數(shù)據(jù)仍正?；仫@

具體實現(xiàn)

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

<!-- table表頭設置row-key,需要唯一標識 -->
<el-table :row-key="(row) => { return row.userId }" ></el-table>
    
<!-- 添加多選，設置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" />

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

當設置了row-key和reserve-selection基本就成了

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

selection-change：當選項發(fā)生變化時會觸發(fā)該函數(shù)

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

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

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

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

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

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

注意：因為我們這里做了分頁，分頁時會重新請求后臺，所以每次請求后要調(diào)用一次toggleSelection函數(shù)來回顯當前頁的數(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="序號" 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ā)生變化時
        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>

補充

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

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

解決方案：data中添加一個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ù)后進行修改數(shù)據(jù)，只會保存當前頁的數(shù)據(jù)，其他分頁的數(shù)據(jù)被刷掉