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-10Vue使用$attrs實現(xiàn)爺爺直接向?qū)O組件傳遞數(shù)據(jù)
這篇文章主要為大家詳細(xì)介紹了Vue如何使用$attrs實現(xiàn)爺爺直接向?qū)O組件傳遞數(shù)據(jù),文中的示例代碼講解詳細(xì),感興趣的小伙伴可以了解一下2024-02-02vue.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-03vue中的eventBus會不會產(chǎn)生內(nèi)存泄漏你知道嗎
這篇文章主要為大家詳細(xì)介紹了vue中的eventBus會不會產(chǎn)生內(nèi)存泄漏,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助2022-02-02vue使用formData時候傳遞參數(shù)是個空值的情況處理
這篇文章主要介紹了vue使用formData時候傳遞參數(shù)是個空值的情況處理,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-05-05