Vue2 Element el-table多選表格控制選取的思路解讀
前言
構(gòu)建多選表格, 實現(xiàn)對監(jiān)聽選取狀況, 獲取當前選中項行數(shù)據(jù), 獲取當前所有選中項.
一、構(gòu)建多選表格
構(gòu)建DOM結(jié)構(gòu), 在表格el-table內(nèi)加一個特殊列即可, 將列類型type屬性設(shè)置為selection.
<el-table-column type="selection"> </el-table-column>
注意如果使用v-for指令生成表格, 不要將上面這段代碼直接加在v-for里, 不然每行旁邊都有一個選項列, 肯定是要分開的, 但是怎么分開的同時不拆表呢.
剛開始我嘗試過這種方案, 使用一個div將需要遍歷生成的列包裹, 在div上v-for遍歷, 但el-table仍然是基于HTML表格的封裝, 這就像往原生HTML表格的列外面套了div, 會直接破壞表格結(jié)構(gòu).
我差點就忘了這是Vue2…直接把div換成<template></template>就好.
<el-table-column type="selection" width="55">
</el-table-column>
<template v-for="(item, index) in billTableEvent">
<el-table-column
:prop="item.props"
:label="item.label"
:align="item.align"
:min-width="item.minwidth"
v-if="item.props === 'payAmt'"
:key="index"
>
<template slot-scope="scope">
{{ scope.row.payAmt }}
</template>
</el-table-column>
<el-table-column
:prop="item.props"
:label="item.label"
:align="item.align"
:min-width="item.minWidth"
:key="index"
v-else
>
</el-table-column>
</template>二、多選表的事件、方法
剛開始的時候, 我覺得要是將el-table提供的方法作為事件處理函數(shù), 那我豈不是可以同時操作一堆表格參數(shù), 會更簡單些?
然后根本拿不到值…
如果將el-table的方法直接作為事件處理函數(shù), 那么該事件處理函數(shù)會被直接判定為一個普通的事件處理函數(shù), 并不能發(fā)揮到其應(yīng)有的作用, 應(yīng)當通過事件拿到el-table相關(guān)參數(shù), 然后在合適的地方調(diào)用el-table提供的方法來協(xié)助達成目的.
獲取參數(shù)例：
methods: {
handleSelectChange(selection) {
this.multipleSelection = selection;
console.log(selection); // [{...}, {...}]
},
handleSelectAll(selection) {
console.log(this.multipleSelection);
console.log(selection); // [{...}, {...}]
},
},el-table的事件處理函數(shù)內(nèi)除了可以使用事件本身攜帶的參數(shù), 還可以使用el-table的方法, 事實上這些el-table提供的方法可以在各種能調(diào)用函數(shù)的地方被調(diào)用, 并且它們各自接收固定的值作為參數(shù),
舉例官方的例子, 在表格外調(diào)用toggleSelection:
但由于使用這些方法需要接收固定的參數(shù), 在el-table的事件處理函數(shù)里調(diào)用它們可能會更方便一些.
<div id="empty">
<el-table
ref="tableEBBA020M"
:data="billData"
@row-click="rowClick"
@selection-change="handleSelectChange"
>
<el-table-column
v-for="(item, index) in billTableEvent"
:prop="item.props"
:label="item.label"
:align="item.align"
:min-width="item.minwidth"
v-if="item.props === 'payAmt'"
:key="index"
>
<template slot-scope="scope">
{{ scope.row.payAmt }}
</template>
</el-table-column>
</el-table>
</div>然后自己起一個事件處理函數(shù)名(額…至少要和事件相關(guān)), 在這個事件處理函數(shù)里面調(diào)用el-table的方法.
methods: {
rowClick(row) { // 單選
this.$refs.tableEBBA020M.toggleRowSelection(row);
},
}不需要去考慮太復(fù)雜的事情, 比如設(shè)立一個變量每次選中就+1偶數(shù)時選中奇數(shù)取消什么的(已經(jīng)開始難受了), 這些細化的事情Element已經(jīng)幫忙做好了, 完成后會直接把結(jié)果給你, 也就是事件所攜帶的各種參數(shù).
利用上面的方法拿到el-table的selection和row, 配合一些數(shù)組方法就已經(jīng)可以完成大多數(shù)的多選表格控制.
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
- vue2+element?ui?中的el-table?選中當前行當前行變色的實現(xiàn)代碼
- Vue2+Element-ui實現(xiàn)el-table表格自適應(yīng)高度的案例
- vue2+elementui的el-table固定列會遮住橫向滾動條及錯位問題解決方案
- VUE2.0+ElementUI2.0表格el-table循環(huán)動態(tài)列渲染的寫法詳解
- VUE2.0 ElementUI2.0表格el-table自適應(yīng)高度的實現(xiàn)方法
- vue2.0 + element UI 中 el-table 數(shù)據(jù)導(dǎo)出Excel的方法
- vue2使用el-tag實現(xiàn)自定義菜單導(dǎo)航標簽
- vue2實現(xiàn)在el-table里插入el-tag的示例代碼
相關(guān)文章
這篇文章主要介紹了vue中如何給靜態(tài)資源增加路由前綴，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
vue3+vite項目配置ESlint、pritter插件過程
這篇文章主要介紹了vue3+vite項目配置ESlint、pritter插件過程,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
這篇文章主要為大家介紹了Vue的slot插槽，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-11-11
本篇文章主要介紹了在vue中使用jointjs的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了Vue.js如何使用Socket.IO的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-09-09
vue綁定數(shù)字類型 value為數(shù)字的實例
這篇文章主要介紹了vue綁定數(shù)字類型 value為數(shù)字的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
Vue監(jiān)聽一個數(shù)組id是否與另一個數(shù)組id相同的方法
今天小編就為大家分享一篇Vue監(jiān)聽一個數(shù)組id是否與另一個數(shù)組id相同的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vue中使用heatmapjs的示例代碼（結(jié)合百度地圖）
這篇文章主要介紹了vue中使用heatmapjs的示例代碼（結(jié)合百度地圖），小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了Vue SSR 即時編譯技術(shù)的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-05-05
vite添加環(huán)境變量import.meta.env方式
Vite通過`import.meta.env`對象暴露環(huán)境變量,可以在不同文件中配置不同環(huán)境下的變量,便于維護和使用,配置環(huán)境變量和模式時,需要注意在字符串中使用`import.meta.env.VITE_APP_TITLE`的方式,避免打包報錯2026-01-01