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