vue+element實(shí)現(xiàn)批量刪除功能的示例
更新時(shí)間：2018年02月28日 08:54:53 作者：鷹子
下面小編就為大家分享一篇vue+element實(shí)現(xiàn)批量刪除功能的示例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
今年開始學(xué)習(xí)vue+element實(shí)現(xiàn)后臺(tái)開發(fā)，在實(shí)現(xiàn)批量刪除功能時(shí)有2個(gè)小知識(shí)點(diǎn)記錄在下：
1、如何實(shí)現(xiàn)單擊行交替選中當(dāng)前行的復(fù)選框，element官網(wǎng)的table實(shí)例中沒有找到?！ㄟ^row-click和toggleRowSelection實(shí)現(xiàn)
2、如何獲取選中行的值來實(shí)現(xiàn)批量刪除?！ㄟ^selection-change實(shí)現(xiàn)
代碼如下
html：
<div class="row mt30 pl15">
<el-button type="warning" @click="delGroup" :disabled="this.sels.length === 0">批量刪除</el-button><!--disabled值動(dòng)態(tài)顯示，默認(rèn)為true,當(dāng)選中復(fù)選框后值為false-->
</div>
<el-table :data="tableList" :fit="true" @row-click="handleCurrentChange" @selection-change="selsChange" ref="table">
<el-table-column type="selection" width="55" reserve-selection=""></el-table-column>
<el-table-column prop="id" label="ID" width="150" class-name="bg_blue"></el-table-column>
<el-table-column prop="cpsProductId" label="商品ID" width="200"></el-table-column>
<el-table-column prop="productName" label="商品名稱" width="200" show-overflow-tooltip></el-table-column>
<el-table-column label="圖片" width="200">
<template scope="data1">
<img :src="data1.row.imgsrc" class="mt10 mb10">
</template>
</el-table-column>
<el-table-column label="操作" align="center">
<template scope="scope">
<el-button type="primary" size="small" @click="onEditSku(scope.row.id)">編輯</el-button>
<el-button size="small" @click="onDelProduct(scope.row.id)">刪除</el-button>
</template>
</el-table-column>
</el-table>
js：
<script>
export default {
name: 'product',
mounted() {
this.onSearch()
},
data() {
return {
sels: [],//選中的值顯示
tableList: [],
total: 0,
start: 0,
size: 10
}
},
methods: {
selsChange(sels) {
this.sels = sels
},
delGroup() {
var ids = this.sels.map(item => item.id).join()//獲取所有選中行的id組成的字符串，以逗號(hào)分隔
},
handleCurrentChange(row, event, column) {
this.$refs.table.toggleRowSelection(row)
}
}
}
</script>
以上這篇vue+element實(shí)現(xiàn)批量刪除功能的示例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue項(xiàng)目配置在局域網(wǎng)下訪問方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
VUE使用echarts?5.0以上版本渲染器未導(dǎo)入錯(cuò)誤問題
這篇文章主要介紹了VUE使用echarts?5.0以上版本渲染器未導(dǎo)入錯(cuò)誤問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06
Vue?Electron實(shí)現(xiàn)輸入法自動(dòng)刷字?jǐn)?shù)功能詳解
這篇文章主要介紹了Vue?Electron實(shí)現(xiàn)輸入法自動(dòng)刷字?jǐn)?shù)功能，文中的示例代碼講解詳細(xì)，對(duì)我們學(xué)習(xí)C#有一定的幫助，感興趣的小伙伴可以跟隨小編一起了解一下2022-12-12
vue監(jiān)聽sessionStorage中值的變化方式
這篇文章主要介紹了vue監(jiān)聽sessionStorage中值的變化方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
這篇文章主要介紹了vue中使用swiper 插件出錯(cuò)問題及解決辦法，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-08-08
Vue-CLI 3 scp2自動(dòng)部署項(xiàng)目至服務(wù)器的方法
這篇文章主要介紹了Vue-CLI 3 scp2自動(dòng)部署項(xiàng)目至服務(wù)器的方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
在Vue3項(xiàng)目中需要頻繁使用某一個(gè)方法,配置到全局感覺會(huì)方便很多,這篇文章主要給大家介紹了關(guān)于Vue3使用全局函數(shù)或變量的2種常用方式,需要的朋友可以參考下2023-09-09
賴注入的方式共享數(shù)據(jù)在Vue中是一種高級(jí)特性,它主要用于開發(fā)插件或庫,或者處理一些特殊的場景,這篇文章主要介紹了Vue 使用依賴注入的方式共享數(shù)據(jù),需要的朋友可以參考下2023-11-11
Vue路由組件的緩存keep-alive和include屬性的具體使用
：瀏覽器頁面在進(jìn)行切換時(shí),原有的路由組件會(huì)被銷毀,通過緩存可以保存被切換的路由組件,本文主要介紹了Vue路由組件的緩存keep-alive和include屬性的具體使用,感興趣的可以了解一下2023-11-11
這篇文章主要為大家介紹了vue之mixin的使用，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-11-11