Vue2 Element多選表格row-click選取與行禁用方式
更新時間：2026年04月15日 15:05:31 作者：白瑕
文章介紹了在表格中實現(xiàn)行選取的方法,首先,使用row-click事件實現(xiàn)行選?。黄浯?針對特定條件（如cTotAmt和dTotAmt不等）,在row-click事件處理函數(shù)中直接returnfalse,禁用該行選?。蛔詈?結(jié)合selectable使用達到徹底禁行選取的目的
前言
點擊行, 和點擊選取框都不再能進行選取.
一、用row-click事件實現(xiàn)選取行
type=selection提供的選取框?qū)嵲谑翘×? 為了選取方便使用如下方法來做行選取:
rowClick(row) { // row-click事件處理函數(shù)
this.$refs.tableRef.toggleRowSelection(row)
},
handleSelectChange(selection) { // selection-change事件處理函數(shù)
this.multipleSelection = selection // 可有可無, 將存有所有選取項的數(shù)組存入data
},
二、禁選行
我說的是點擊行和點擊選取框都不再能進行選取.
有做行禁選取的需求, 今天看到有使用selectable完成的, 但是只能禁用勾選框選取, 并不能阻止基于row-click事件進行的選取.
需求是當行數(shù)據(jù)對象row中cTotAmt和dTotAmt不等時該行禁選, 那么在row-click事件處理函數(shù)起始進行對兩值的判定, 不符合條件則直接return false, 配合selectable使用達到徹底禁選的目的.
<el-table-column width="40" type="selection" :selectable="selectHandle" > <!-- selectable, 如果是勾選框列有禁用需求就要加在勾選框列. --> </el-table-column>
selectHandle(row) { // 也可以獲取到index列下標
// 這個函數(shù)會在生成列時自動對所有行數(shù)據(jù)對象執(zhí)行, 如果當前row進入該函數(shù)執(zhí)行結(jié)果為false那么該單元格selectable=false.
if (row.crTotAmt !== row.drTotAmt) {
return false
}
return true // 滿足條件一定記得返true, 不然全都會禁選
},
rowClick(row) { // row-click事件處理函數(shù)
if (row.crTotAmt !== row.drTotAmt) { // 禁選借貸不平衡
return false
}
this.$refs.tableEBEC400U.toggleRowSelection(row)
const temObj = {
evidNo: row.evidNo,
drTotAmt: this.numberToCurrencyNo(row.drTotAmt)
}
this.resDisplayRawParams = temObj
}
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue之監(jiān)聽器的使用案例詳解,本篇文章通過簡要的案例,講解了該項技術(shù)的了解與使用,以下就是詳細內(nèi)容,需要的朋友可以參考下2021-09-09
Vue使用new?Blob()實現(xiàn)不同類型的文件下載功能
這篇文章主要給大家介紹了關(guān)于Vue使用new?Blob()實現(xiàn)不同類型的文件下載功能的相關(guān)資料,在Vue項目中,經(jīng)常用Blob二進制進行文件下載功能,需要的朋友可以參考下2023-07-07
Vue組件設(shè)計之多列表拖拽交換排序功能實現(xiàn)
這篇文章主要介紹了Vue組件設(shè)計之多列表拖拽交換排序,常見的場景有單列表拖拽排序，多列表拖拽交換排序，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-05-05
keepalive是Vue的內(nèi)置組件,作用是將組件緩存在內(nèi)存當中,防止重復渲染DOM,屬于消耗內(nèi)存獲取速度,這篇文章主要介紹了vue3項目keepAlive使用方法,主要將keepaliev在vue3.0中的用法,需要的朋友可以參考下2024-03-03
這篇文章主要為大家詳細介紹了Vue實現(xiàn)記事本功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-06-06
關(guān)于在vue 中使用百度ueEditor編輯器的方法實例代碼
這篇文章主要介紹了在vue 中使用百度ueEditor編輯器的方法實例代碼 ,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-09-09
在Vue3中,defineProps()函數(shù)是定義和接收組件屬性的主要方式,通過簡單定義或?qū)ο蠖x,開發(fā)者可以靈活地接收并處理組件上的屬性值,簡單定義方式通過數(shù)組傳遞屬性名,而對象定義則可以約束屬性的數(shù)據(jù)類型、默認值及是否必須傳遞等2024-09-09
Vue.js中this如何取到data和method里的屬性詳解
methods屬性是一個對象,通常我們會在這個對象中定義很多的方法,下面這篇文章主要給大家介紹了關(guān)于Vue.js中this如何取到data和method里的屬性,需要的朋友可以參考下2022-12-12
這篇文章主要介紹了vue中pc移動滾動穿透問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
這篇文章主要為大家詳細介紹了Vues實現(xiàn)跑馬燈效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10