Vue3 + Element Plus 實(shí)現(xiàn)表格全選/反選/禁用功能(示例詳解)
更新時(shí)間：2025年03月11日 14:16:10 作者：misschen888
本文詳細(xì)介紹了如何使用Vue3組合式API和ElementPlus實(shí)現(xiàn)表格的全選/反選/禁用功能,并分享了分頁(yè)保持、視覺提示優(yōu)化、性能優(yōu)化等技巧,同時(shí),還提供了常見問題的解決方案和擴(kuò)展思考,幫助開發(fā)者構(gòu)建功能豐富且用戶體驗(yàn)良好的表格組件,感興趣的朋友一起看看吧
Vue3 + Element Plus 實(shí)現(xiàn)表格全選/反選/禁用功能詳解
一、功能概述與最終效果
本文將基于Vue3組合式API，實(shí)現(xiàn)Element Plus表格的以下核心功能：
- 全選/全不選：表頭復(fù)選框控制全部數(shù)據(jù)
- 反選功能：快速反轉(zhuǎn)當(dāng)前選中狀態(tài)
- 行禁用：禁止選中特定數(shù)據(jù)行
- 分頁(yè)保持：分頁(yè)切換時(shí)保留選中狀態(tài)
二、基礎(chǔ)表格搭建
<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>三、核心功能實(shí)現(xiàn)
1. 數(shù)據(jù)準(zhǔn)備與禁用控制
import { ref } from 'vue'
interface TableItem {
id: number
name: string
age: number
status: '正常' | '禁用'
}
// 響應(yīng)式數(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. 全選/全不選實(shí)現(xiàn)
const toggleAll = () => {
// 獲取當(dāng)前頁(yè)所有可選項(xiàng)
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. 反選功能實(shí)現(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)保持（配合分頁(yè)）
// 存儲(chǔ)選中ID
const selectedIds = ref<number[]>([])
// 監(jiān)聽選中變化
const handleSelectionChange = (rows: TableItem[]) => {
selectedIds.value = rows.map(row => row.id)
}
// 分頁(yè)切換時(shí)恢復(fù)選中
const handlePageChange = () => {
nextTick(() => {
tableData.value.forEach(row => {
if (selectedIds.value.includes(row.id)) {
tableRef.value?.toggleRowSelection(row, true)
}
})
})
}四、功能增強(qiáng)技巧
1. 表頭復(fù)選框樣式優(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 }} 項(xiàng)</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é)的實(shí)現(xiàn)代碼
</script>
<style scoped>
/* 樣式優(yōu)化代碼... */
</style>六、常見問題解決方案
Q1: 分頁(yè)切換后選中狀態(tài)丟失？
- 方案：使用row-key綁定唯一標(biāo)識(shí)，配合selection-change存儲(chǔ)選中ID
Q2: 禁用行仍可被全選選中？
- 檢查點(diǎn)：
- selectable方法是否正確返回布爾值
- 全選邏輯是否過濾了不可選數(shù)據(jù)
Q3: 大數(shù)據(jù)量性能問題？
- 優(yōu)化建議：
- 使用虛擬滾動(dòng)（el-table-v2）
- 避免在模板中使用復(fù)雜表達(dá)式
- 使用Web Worker處理數(shù)據(jù)篩選
七、擴(kuò)展思考
- 服務(wù)端分頁(yè)場(chǎng)景：需要結(jié)合接口傳遞選中ID集合
- 樹形表格處理：使用el-table的tree-props配置
- 多級(jí)表頭支持：嵌套el-table-column實(shí)現(xiàn)復(fù)雜表頭
- 無障礙訪問：為操作按鈕添加ARIA標(biāo)簽
通過合理運(yùn)用Element Plus提供的API和Vue3響應(yīng)式特性，可以構(gòu)建出功能強(qiáng)大且用戶體驗(yàn)良好的表格組件。建議在實(shí)際開發(fā)中根據(jù)具體業(yè)務(wù)需求靈活調(diào)整實(shí)現(xiàn)方案。
到此這篇關(guān)于Vue3 + Element Plus 實(shí)現(xiàn)表格全選/反選/禁用功能詳解的文章就介紹到這了,更多相關(guān)Vue3 Element Plus 表格內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
- Vue3實(shí)現(xiàn)Element Plus表格的多選功能與條件操作
- 基于Vue3和Element Plus實(shí)現(xiàn)可擴(kuò)展的表格組件
- vue3基于elementplus 簡(jiǎn)單實(shí)現(xiàn)表格二次封裝過程
- 利用Vue3+Element?Plus封裝公共表格組件(帶源碼)
- Vue3中Element Plus Table(表格)點(diǎn)擊獲取對(duì)應(yīng)id方式
- vue3+element?Plus實(shí)現(xiàn)表格前端分頁(yè)完整示例
- vue3?element-plus?實(shí)現(xiàn)表格數(shù)據(jù)更改功能詳細(xì)步驟
相關(guān)文章
vue3實(shí)現(xiàn)無縫滾動(dòng)組件的示例代碼
在日常開發(fā)中,經(jīng)常遇到需要支持列表循環(huán)滾動(dòng)展示,特別是在數(shù)據(jù)化大屏開發(fā)中,所以小編今天為大家介紹一下如何利用vue3實(shí)現(xiàn)一個(gè)無縫滾動(dòng)組件吧2023-09-09
這篇文章主要為大家介紹了Vue3組件間傳值避坑方法指南，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
Vue實(shí)現(xiàn)一個(gè)帶有緩存功能的Tab頁(yè)簽功能
在現(xiàn)代?Web?應(yīng)用中,Tab?頁(yè)簽功能是非常常見的一種交互模式,它可以幫助用戶在不同的視圖間快速切換,而不會(huì)丟失當(dāng)前視圖的狀態(tài),本文將介紹如何在?Vue?項(xiàng)目中實(shí)現(xiàn)一個(gè)帶有緩存功能的?Tab?頁(yè)簽功能,需要的朋友可以參考下2024-08-08
過濾器的功能是對(duì)要顯示的數(shù)據(jù)進(jìn)行格式化后再顯示,其并沒有改變?cè)镜臄?shù)據(jù),只是產(chǎn)生新的對(duì)應(yīng)的數(shù)據(jù),下面這篇文章主要給大家介紹了關(guān)于Vue中過濾器定義以及使用方法的相關(guān)資料,需要的朋友可以參考下2022-12-12
vue實(shí)現(xiàn)模態(tài)框的通用寫法推薦
下面小編就為大家分享一篇vue實(shí)現(xiàn)模態(tài)框的通用寫法推薦，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-02-02
這篇文章主要介紹了Vue搭建后臺(tái)系統(tǒng)需要做的幾點(diǎn)，文中給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-11-11
這篇文章主要介紹了vue實(shí)現(xiàn)自定義組件掛載原型上方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
Vue利用openlayers實(shí)現(xiàn)點(diǎn)擊彈窗的方法詳解
點(diǎn)擊彈窗其實(shí)就是添加一個(gè)彈窗圖層，然后在點(diǎn)擊的時(shí)候讓他顯示出來罷了。本文將利用openlayers實(shí)現(xiàn)這一效果，快跟隨小編一起學(xué)習(xí)一下吧2022-06-06
element-ui循環(huán)顯示radio控件信息的方法
今天小編就為大家分享一篇element-ui循環(huán)顯示radio控件信息的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要為大家詳細(xì)介紹了Vue的computed計(jì)算屬性，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03