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