element table跨分頁多選及回顯的實(shí)現(xiàn)示例
更新時(shí)間：2022年02月23日 10:11:36 作者：妮可是條狗
本文主要介紹了element table跨分頁多選及回顯的實(shí)現(xiàn)示例，文中通過示例代碼介紹的非常詳細(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跨分頁多選及回顯的實(shí)現(xiàn)示例的文章就介紹到這了,更多相關(guān)element table跨分頁多選及回顯內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)驗(yàn)證碼功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-12-12
vue.js的computed,filter,get,set的用法及區(qū)別詳解
下面小編就為大家分享一篇vue.js的computed,filter,get,set的用法及區(qū)別詳解，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
關(guān)于vue.js中實(shí)現(xiàn)方法內(nèi)某些代碼延時(shí)執(zhí)行
今天小編就為大家分享一篇關(guān)于vue.js中實(shí)現(xiàn)方法內(nèi)某些代碼延時(shí)執(zhí)行，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要介紹了vue中關(guān)于computed的this指向問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
關(guān)于vue3使用particles粒子特效的問題
這篇文章主要介紹了關(guān)于vue3使用particles粒子特效的問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
這篇文章主要介紹了Vue3中使用setup通過ref獲取子組件的屬性，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
Vue3?響應(yīng)式系統(tǒng)實(shí)現(xiàn)?computed
這篇文章主要介紹了?Vue3?響應(yīng)式系統(tǒng)實(shí)現(xiàn)?computed，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，感興趣的小伙伴可以參考一下2022-06-06
vue常用指令有v-once指令、v-show指令、v-if指令、v-else指令、v-else-if指令、v-for指令、v-html指令、v-text指令、v-bind指令、v-on指令、v-model指令等等,下面這篇文章主要給大家介紹了八個(gè)Vue中常用的v指令的相關(guān)資料,需要的朋友可以參考下2022-04-04
Vue動(dòng)態(tài)添加表單的實(shí)現(xiàn)方法
在Vue.js應(yīng)用中,動(dòng)態(tài)表單是一個(gè)常見的需求,尤其是當(dāng)表單字段的數(shù)量和類型需要根據(jù)用戶輸入或系統(tǒng)狀態(tài)動(dòng)態(tài)變化時(shí),本文將詳細(xì)介紹如何在Vue中實(shí)現(xiàn)動(dòng)態(tài)表單的創(chuàng)建,并通過多個(gè)示例展示具體的實(shí)現(xiàn)方法,需要的朋友可以參考下2024-09-09
這篇文章主要介紹了詳解vue-cli下ESlint 配置說明，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-09