Vue3 + Element Plus 實現(xiàn)表格全選/反選/禁用功能(示例詳解)
更新時間：2025年03月11日 14:16:10 作者：misschen888
本文詳細介紹了如何使用Vue3組合式API和ElementPlus實現(xiàn)表格的全選/反選/禁用功能,并分享了分頁保持、視覺提示優(yōu)化、性能優(yōu)化等技巧,同時,還提供了常見問題的解決方案和擴展思考,幫助開發(fā)者構建功能豐富且用戶體驗良好的表格組件,感興趣的朋友一起看看吧
Vue3 + Element Plus 實現(xiàn)表格全選/反選/禁用功能詳解
一、功能概述與最終效果
本文將基于Vue3組合式API，實現(xiàn)Element Plus表格的以下核心功能：
- 全選/全不選：表頭復選框控制全部數(shù)據(jù)
- 反選功能：快速反轉當前選中狀態(tài)
- 行禁用：禁止選中特定數(shù)據(jù)行
- 分頁保持：分頁切換時保留選中狀態(tài)
二、基礎表格搭建
<template>
<div class="table-demo">
<el-table
ref="tableRef"
:data="tableData"
row-key="id"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55" :selectable="checkSelectable" />
<el-table-column prop="name" label="姓名" />
<el-table-column prop="age" label="年齡" />
<el-table-column prop="status" label="狀態(tài)" />
</el-table>
<div class="operate-btns">
<el-button @click="toggleAll">全選/反選</el-button>
<el-button @click="reverseSelect">反選</el-button>
</div>
</div>
</template>三、核心功能實現(xiàn)
1. 數(shù)據(jù)準備與禁用控制
import { ref } from 'vue'
interface TableItem {
id: number
name: string
age: number
status: '正常' | '禁用'
}
// 響應式數(shù)據(jù)
const tableRef = ref()
const tableData = ref<TableItem[]>([
{ id: 1, name: '張三', age: 25, status: '正常' },
{ id: 2, name: '李四', age: 30, status: '禁用' },
// 更多數(shù)據(jù)...
])
// 禁用判斷方法
const checkSelectable = (row: TableItem) => {
return row.status !== '禁用'
}2. 全選/全不選實現(xiàn)
const toggleAll = () => {
// 獲取當前頁所有可選項
const selectableRows = tableData.value.filter(row => checkSelectable(row))
// 判斷是否需要全選
const shouldSelectAll = selectableRows.some(row =>
!tableRef.value?.getRowSelected(row)
)
tableData.value.forEach(row => {
if (checkSelectable(row)) {
tableRef.value?.toggleRowSelection(row, shouldSelectAll)
}
})
}3. 反選功能實現(xiàn)
const reverseSelect = () => {
const currentSelection = tableRef.value?.getSelectionRows() || []
const selectableRows = tableData.value.filter(row => checkSelectable(row))
selectableRows.forEach(row => {
const isSelected = currentSelection.some(
(selected: TableItem) => selected.id === row.id
)
tableRef.value?.toggleRowSelection(row, !isSelected)
})
}4. 選中狀態(tài)保持（配合分頁）
// 存儲選中ID
const selectedIds = ref<number[]>([])
// 監(jiān)聽選中變化
const handleSelectionChange = (rows: TableItem[]) => {
selectedIds.value = rows.map(row => row.id)
}
// 分頁切換時恢復選中
const handlePageChange = () => {
nextTick(() => {
tableData.value.forEach(row => {
if (selectedIds.value.includes(row.id)) {
tableRef.value?.toggleRowSelection(row, true)
}
})
})
}四、功能增強技巧
1. 表頭復選框樣式優(yōu)化
::v-deep .el-table__header-wrapper .el-checkbox {
display: inline-flex;
&__inner::after {
border-color: #fff;
}
&.is-disabled {
opacity: 0.6;
cursor: not-allowed;
}
}2. 禁用行視覺提示
<el-table :row-class-name="setDisabledStyle">
<script>
const setDisabledStyle = ({ row }: { row: TableItem }) => {
return row.status === '禁用' ? 'disabled-row' : ''
}
</script>
<style>
.disabled-row {
opacity: 0.6;
cursor: not-allowed;
td:first-child .el-checkbox {
display: none;
}
}
</style>五、完整組件代碼
<template>
<div class="table-container">
<el-table
ref="tableRef"
:data="tableData"
:row-class-name="setDisabledStyle"
row-key="id"
@selection-change="handleSelectionChange"
>
<el-table-column
type="selection"
width="55"
:selectable="checkSelectable"
/>
<el-table-column prop="name" label="姓名" />
<el-table-column prop="age" label="年齡" />
<el-table-column prop="status" label="狀態(tài)" />
</el-table>
<div class="table-actions">
<el-button type="primary" @click="toggleAll">
{{ isAllSelected ? '取消全選' : '全選' }}
</el-button>
<el-button @click="reverseSelect">反選</el-button>
<span class="selected-count">已選：{{ selectedIds.length }} 項</span>
</div>
<el-pagination
layout="prev, pager, next"
:total="50"
@current-change="handlePageChange"
/>
</div>
</template>
<script setup lang="ts">
import { ref, nextTick, computed } from 'vue'
// 數(shù)據(jù)與狀態(tài)定義...
// 此處插入前面章節(jié)的實現(xiàn)代碼
</script>
<style scoped>
/* 樣式優(yōu)化代碼... */
</style>六、常見問題解決方案
Q1: 分頁切換后選中狀態(tài)丟失？
- 方案：使用row-key綁定唯一標識，配合selection-change存儲選中ID
Q2: 禁用行仍可被全選選中？
- 檢查點：
- selectable方法是否正確返回布爾值
- 全選邏輯是否過濾了不可選數(shù)據(jù)
Q3: 大數(shù)據(jù)量性能問題？
- 優(yōu)化建議：
- 使用虛擬滾動（el-table-v2）
- 避免在模板中使用復雜表達式
- 使用Web Worker處理數(shù)據(jù)篩選
七、擴展思考
- 服務端分頁場景：需要結合接口傳遞選中ID集合
- 樹形表格處理：使用el-table的tree-props配置
- 多級表頭支持：嵌套el-table-column實現(xiàn)復雜表頭
- 無障礙訪問：為操作按鈕添加ARIA標簽
通過合理運用Element Plus提供的API和Vue3響應式特性，可以構建出功能強大且用戶體驗良好的表格組件。建議在實際開發(fā)中根據(jù)具體業(yè)務需求靈活調整實現(xiàn)方案。
到此這篇關于Vue3 + Element Plus 實現(xiàn)表格全選/反選/禁用功能詳解的文章就介紹到這了,更多相關Vue3 Element Plus 表格內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
本篇文章主要介紹了Vue.nextTick 的實現(xiàn)方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
這篇文章主要為大家詳細介紹了Vue實現(xiàn)點擊導航欄當前標簽后變色功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-08-08
這篇文章主要介紹了Vue中的scoped及穿透方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
vue項目element-ui級聯(lián)選擇器el-cascader回顯的問題及解決
這篇文章主要介紹了vue項目element-ui級聯(lián)選擇器el-cascader回顯的問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
本篇文章主要介紹了詳解vue.js之綁定class和style的示例代碼，具有一定的參考價值，有興趣的可以了解一下2017-08-08
vue props default Array或是Object的正確寫法說明
這篇文章主要介紹了vue props default Array或是Object的正確寫法說明，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
關于vue組件的更新機制?resize()?callResize()
這篇文章主要介紹了關于vue組件的更新機制?resize()?callResize()，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue中的v-if和v-show的區(qū)別詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-09-09
這篇文章主要介紹了Vue 中獲取當前時間并實時刷新,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-05-05
今天小編就為大家分享一篇vue router 傳參獲取不到的解決方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11