快捷導(dǎo)航

element plus el-table多選框跨頁(yè)多選保留功能

更新時(shí)間：2025年05月13日 09:31:50 作者：a濯

這篇文章主要介紹了element plus el-table多選框跨頁(yè)多選保留功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧

一、基礎(chǔ)多選配置

通過(guò) type=“selection” 開(kāi)啟多選列，并綁定 selection-change 事件獲取選中數(shù)據(jù)

<template>
  <el-table 
    :data="tableData" 
    @selection-change="handleSelectionChange"
  >
    <el-table-column type="selection" width="55" />
    <el-table-column prop="name" label="名稱" />
    <!-- 其他列 -->
  </el-table>
</template>
<script setup>
const tableData = ref([...]);
const selectedData = ref([]);
const handleSelectionChange = (val) => {
  selectedData.value = val; // 獲取選中數(shù)據(jù)
};
</script>

二、跨頁(yè)多選保留

需設(shè)置 row-key 和 reserve-selection 屬性實(shí)現(xiàn)跨頁(yè)保留選中狀態(tài)

<el-table 
  :data="tableData" 
  row-key="id" 
  @selection-change="handleSelectionChange"
>
  <el-table-column 
    type="selection" 
    :reserve-selection="true" 
    width="55" 
  />
  <!-- 其他列 -->
</el-table>

三、條件控制可選狀態(tài)

通過(guò) selectable 屬性動(dòng)態(tài)控制行是否可選中

<el-table-column 
  type="selection" 
  :selectable="(row, index) => row.status !== 'disabled'"
/>

四、手動(dòng)回顯選中數(shù)據(jù)

使用 toggleRowSelection 方法回顯已選數(shù)據(jù)

<el-table ref="tableRef" row-key="id">
  <!-- 列配置 -->
</el-table>
<script setup>
import { nextTick } from 'vue';
const defaultSelected = ref([...]); // 默認(rèn)選中數(shù)據(jù)
// 回顯方法
const initSelection = async () => {
  await nextTick();
  defaultSelected.value.forEach(row => {
    tableRef.value.toggleRowSelection(row, true);
  });
};
</script>

五、樣式與交互優(yōu)化

‌行點(diǎn)擊觸發(fā)多選‌：通過(guò) @row-click 配合 toggleRowSelection 實(shí)現(xiàn)點(diǎn)擊行選中

<el-table @row-click="handleRowClick">
  <!-- 列配置 -->
</el-table>
<script setup>
const handleRowClick = (row) => {
  tableRef.value.toggleRowSelection(row);
};
</script>

‌調(diào)整多選框樣式‌：通過(guò)自定義 CSS 覆蓋默認(rèn)樣式（如間距、顏色等）。

六、注意事項(xiàng)：

id必須是表格數(shù)據(jù)中存在的key，請(qǐng)根據(jù)自己的表格數(shù)據(jù)結(jié)構(gòu)來(lái)定義。
性能優(yōu)化：跨頁(yè)多選需結(jié)合分頁(yè)接口動(dòng)態(tài)加載數(shù)據(jù)，避免一次性加載全量數(shù)據(jù)。
完整示例可參考 Element Plus 官方文檔或上述實(shí)現(xiàn)邏輯組合使用

到此這篇關(guān)于element plus el-table多選框跨頁(yè)多選保留的文章就介紹到這了,更多相關(guān)element plus el-table多選框內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: