element el-table 表格限制多選個數(shù)功能
本次的功能的要求是:
- 原本的引入的
elment +的表格,去除全選框, - 版本對比的按鈕,需要在選擇版本,并且版本個數(shù)為2的時候,可點(diǎn)擊,進(jìn)行版本對比操作
- 每次選擇版本的時候,目前已有兩個選擇的版本,選擇第三個的時候,把第一個版本取消勾選

//tabel表格相關(guān)代碼
<div class="top layout-start margin_b_10">
<el-button
color="#255EFF"
@click="compare"
:disabled="compareFileArr.data.length !== 2"
>版本對比</el-button
>
<span>(請選擇兩個文件版本進(jìn)行對比)</span>
</div>
<el-table
ref="multipleTableRef"
@select="select"
:data="tableData"
style="width: 100%"
:header-cell-class-name="cellClass"
:header-cell-style="{ background: '#F3F3F3' }"
border
>
<el-table-column type="selection" align="center" width="50" />
<el-table-column label="版本" show-overflow-tooltip>
<template #default="scope">{{ scope.row.name }}</template>
</el-table-column>
<el-table-column property="address" label="md5" width="100" />
<el-table-column property="address" label="狀態(tài)" width="100" />
<el-table-column property="address" label="發(fā)布描述" width="100" />
<el-table-column property="date" label="最后更新時間" width="200" />
<el-table-column property="address" label="最后更新人" width="100" />
<el-table-column property="操作" width="300" align="center">
<template #default>
<div>
<el-button link type="primary" size="small">編輯</el-button>
<el-button link type="primary" size="small">回退</el-button>
<el-button link type="primary" size="small">下載</el-button>
</div>
<div>
<el-button link type="primary" size="small">設(shè)置全服標(biāo)簽</el-button>
<el-button link type="primary" size="small"
>添加到待發(fā)布配置</el-button
>
</div>
</template>
</el-table-column>
</el-table>
// 當(dāng)用戶手動勾選數(shù)據(jù)行的 Checkbox 時觸發(fā)的事件
select(selections, row) {
// 選擇項大于2時
if (selections.length > selectionMax) {
// 把數(shù)組的第一個元素從其中刪除
let del_row = selections.shift();
// 用于多選表格,切換某一行的選中狀態(tài),如果使用了第二個參數(shù),則是設(shè)置這一行選中與否(selected 為 true 則選中)
this.$refsmultipleTableRef.toggleRowSelection(del_row, false);
compareFileArr.data = selections;
} else {
compareFileArr.data = selections;
}
}



::v-deep .el-table__header-wrapper .el-checkbox{
display:none
}到此這篇關(guān)于element el-table 表格限制多選個數(shù)的文章就介紹到這了,更多相關(guān)element el-table 表格限制內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vuex(多組件數(shù)據(jù)共享的Vue插件)搭建與使用
Vuex是實現(xiàn)組件全局狀態(tài)(數(shù)據(jù))管理的一種機(jī)制,可以方便的實現(xiàn)組件之間數(shù)據(jù)的共享,數(shù)據(jù)緩存等等,下面這篇文章主要給大家介紹了關(guān)于Vuex(多組件數(shù)據(jù)共享的Vue插件)搭建與使用的相關(guān)資料,需要的朋友可以參考下2022-10-10
Vue使用$attrs實現(xiàn)爺爺直接向?qū)O組件傳遞數(shù)據(jù)
這篇文章主要為大家詳細(xì)介紹了Vue如何使用$attrs實現(xiàn)爺爺直接向?qū)O組件傳遞數(shù)據(jù),文中的示例代碼講解詳細(xì),感興趣的小伙伴可以了解一下2024-02-02
vue.js 雙層嵌套for遍歷的方法詳解, 類似php foreach()
今天小編就為大家分享一篇vue.js 雙層嵌套for遍歷的方法詳解, 類似php foreach(),具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
手寫Vue內(nèi)置組件component的實現(xiàn)示例
本文主要介紹了手寫Vue內(nèi)置組件component的實現(xiàn)示例,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
基于ElementUI中Table嵌套實現(xiàn)多選的示例代碼
這篇文章主要介紹了基于ElementUI中Table嵌套實現(xiàn)多選的示例代碼,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
vue中的eventBus會不會產(chǎn)生內(nèi)存泄漏你知道嗎
這篇文章主要為大家詳細(xì)介紹了vue中的eventBus會不會產(chǎn)生內(nèi)存泄漏,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助2022-02-02
vue使用formData時候傳遞參數(shù)是個空值的情況處理
這篇文章主要介紹了vue使用formData時候傳遞參數(shù)是個空值的情況處理,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-05-05

