element table跨分頁多選及回顯的實現(xiàn)示例

更新時間：2022年02月23日 10:11:36 作者：妮可是條狗

本文主要介紹了element table跨分頁多選及回顯的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

1.data中定義getRowKeys，記錄每行的key值

getRowKeys(row) {
? ?return row.id;
},

2.el-table綁定getRowKeys

<el-table
? ? :data="tableData"
? ? @selection-change="handleSelectionChange"
? ? :row-key="getRowKeys"
>

3.將selection列的reserve-selection設(shè)為true

<el-table-column
? ? type="selection"
? ? width="50"
? ? align="center"
? ? :reserve-selection="true"
></el-table-column>

4.表格數(shù)據(jù)選中方法handleSelectionChange

handleSelectionChange(rows) {
? ? this.multipleSelection = rows;
? ? this.select_number = this.multipleSelection.length;
? ? this.select_Id = [];
? ? if (rows) {
? ? ? ? rows.forEach((row) => {
? ? ? ? ? if (row) {
? ? ? ? ? ? this.select_Id.push(row.id);
? ? ? ? ? }
? ? ? ? });
? ? }
},

代碼整理

<template>
? <div>
? ? <el-table @selection-change="handleSelectionChange" :row-key="getRowKeys">
? ? ? <el-table-column type="selection" width="50" align="center" :reserve-selection="true">?
? ? ? </el-table-column>
? ? </el-table>
? ? <el-pagination>...</el-pagination>
? </div>
</template>
<script>
export default {
? data() {
? ? return {
? ? ? multipleSelection: [], // 表格選中
? ? ? getRowKeys(row) {//記錄每行的key值
? ? ? ? return row.id;
? ? ? },
? ? ? select_number: "", //表格select選中的條數(shù)
? ? ? select_Id: [], //表格select復(fù)選框選中的id
? ? }
? },
? methods: {
? ? handleSelectionChange(rows) {
? ? ? this.multipleSelection = rows;
? ? ? this.select_number = this.multipleSelection.length;
? ? ? this.select_Id = [];
? ? ? if (rows) {
? ? ? ? rows.forEach((row) => {
? ? ? ? ? if (row) {
? ? ? ? ? ? this.select_Id.push(row.id);
? ? ? ? ? }
? ? ? ? });
? ? ? }
? ? },
? }
}

到此這篇關(guān)于element table跨分頁多選及回顯的實現(xiàn)示例的文章就介紹到這了,更多相關(guān)element table跨分頁多選及回顯內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

Vue中實現(xiàn)視頻播放的示例詳解
這篇文章主要為大家學(xué)習(xí)介紹了基于Vue如何實現(xiàn)視頻播放的功能，文中的示例代碼講解詳細(xì)，具有一定的參考價值，需要的小伙伴可以了解一下
2023-08-08
解析vue的provide和inject使用方法及其原理
這篇文章主要介紹了vue的provide和inject使用方法及其原理,本文通過源碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2021-10-10
Vue3系列教程之插槽slot詳解
插槽（slot）可以說在一個?Vue?項目里面處處都有它的身影，比如我們使用一些UI?組件庫的時候，我們通?？梢允褂貌宀蹃碜远x我們的內(nèi)容，今天通過本文給大家介紹vue3插槽slot的相關(guān)知識，感興趣的朋友一起看看吧
2022-08-08
使用vant-uploader上傳照片無法刪除的解決
這篇文章主要介紹了使用vant-uploader上傳照片無法刪除的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-10-10
Vite?vue如何使用cdn引入element-plus
這篇文章主要介紹了Vite?vue使用cdn引入element-plus的相關(guān)知識，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
2023-04-04
使用mint-ui開發(fā)項目的一些心得(分享)
下面小編就為大家?guī)硪黄褂胢int-ui開發(fā)項目的一些心得(分享)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-09-09
vue學(xué)習(xí)教程之帶你一步步詳細(xì)解析vue-cli
這篇文章的主題是vue-cli的理解?；蛟S，很多人在開發(fā)vue的時候，我們會發(fā)現(xiàn)一個問題——只會去用，而不明白它的里面的東西?，F(xiàn)在的框架可以說是足夠的優(yōu)秀，讓開發(fā)者不用為搭建開發(fā)環(huán)境而煩惱。但是有時候，我們還是得回到原始生活體驗一下，才能夠讓自己更上層樓。
2017-12-12
Vue+webpack實現(xiàn)懶加載過程解析
這篇文章主要介紹了Vue+webpack實現(xiàn)懶加載過程解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
2020-02-02
Vue + iView實現(xiàn)Excel上傳功能的完整代碼
前一段時間項目經(jīng)歷了前端上傳文件的過程，首先進(jìn)入頁面會展示默認(rèn)的樣子，選中要上傳的excel文件，本文通過實例圖文相結(jié)合給大家介紹的非常詳細(xì)，需要的朋友參考下吧
2021-06-06
vue實現(xiàn)圖片懶加載的方法分析
這篇文章主要介紹了vue實現(xiàn)圖片懶加載的方法,結(jié)合實例形式分析了vue.js圖片懶加載插件安裝、使用方法與相關(guān)操作注意事項,需要的朋友可以參考下
2020-02-02