tft每日頭條

 > 生活

 > vueelement-ui表格的分頁功能

vueelement-ui表格的分頁功能

生活 更新时间:2025-01-26 16:08:30

對于表單添加分頁後多選後對選中項無法保存的問題的解決:

1.在el-table标簽中加入:row-key="getRowKeys"

2.在el-table-column中的第一行加入以下兩個重要因素

type="selection" :reserve-selection="true"

3.具體如圖所示

vueelement-ui表格的分頁功能(ElementUI中Vue的el-table多選時分頁無法保存選中的項以及回顯)1

4.代碼如下

<el-table :data="names" @row-click="currentChange" :row-key="getRowKeys" @selection-change="handleSelectionChange" border highlight-current-row ref="multipleTable" stripe v-loading="loading" > <el-table-column type="selection" width="60" :reserve-selection="true"> </el-table-column> <el-table-column :show-overflow-tooltip="true" label="序号" type="index" width="60"> </el-table-column> <el-table-column :show-overflow-tooltip="true" label="屬性" prop="propertyName" width="240"></el-table-column> <el-table-column :show-overflow-tooltip="true" label="屬性值" prop="dictValueName" width="420"></el-table-column> </el-table> <div style="margin-top: 20px"> <el-button @click="subitSure()" type="primary" style='text-align: center;' >确認 </el-button> <el-button @click="toggleSelection()" type="primary" style='position: absolute;text-align: center;' > 取消選擇</el-button> </div> <z-pagination :page="page" @pageChange="pageChange"/> </div>

getRowKeys(row) { return row.id },

5. 如果對選中項進行清空需加如下代碼,以及在el-table中加入ref屬性

this.$refs.multipleTable.clearSelection() ------------清空選中的所有項

,

更多精彩资讯请关注tft每日頭條,我们将持续为您更新最新资讯!

查看全部

相关生活资讯推荐

热门生活资讯推荐

网友关注

Copyright 2023-2025 - www.tftnews.com All Rights Reserved