vue+element實(shí)現(xiàn)批量刪除功能的示例
更新時(shí)間：2018年02月28日 08:54:53 作者：鷹子
下面小編就為大家分享一篇vue+element實(shí)現(xiàn)批量刪除功能的示例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
今年開(kāi)始學(xué)習(xí)vue+element實(shí)現(xiàn)后臺(tái)開(kāi)發(fā)，在實(shí)現(xiàn)批量刪除功能時(shí)有2個(gè)小知識(shí)點(diǎn)記錄在下：
1、如何實(shí)現(xiàn)單擊行交替選中當(dāng)前行的復(fù)選框，element官網(wǎng)的table實(shí)例中沒(méi)有找到?！ㄟ^(guò)row-click和toggleRowSelection實(shí)現(xiàn)
2、如何獲取選中行的值來(lái)實(shí)現(xiàn)批量刪除?！ㄟ^(guò)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)批量刪除功能的示例就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了VUE3中的函數(shù)的聲明和使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
vue3項(xiàng)目如何使用prettier格式化代碼
這篇文章主要介紹了vue3項(xiàng)目如何使用prettier格式化代碼問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要為大家詳細(xì)介紹了VUE項(xiàng)目中路由之間的傳值方式，文中的示例代碼講解詳細(xì)，涉及到的方法也都是開(kāi)發(fā)時(shí)常用的，希望對(duì)大家有多幫助2023-06-06
Vue?websocket封裝實(shí)現(xiàn)方法詳解
項(xiàng)目中需要使用websocke，這個(gè)是我自己修修改改好多次之后用得最順手的一版，分享一下。這個(gè)封裝需要搭配vuex使用，因?yàn)槭盏降臄?shù)據(jù)都保存在vuex中了，真的絕絕子好用，解決了我一大堆問(wèn)題2022-09-09
這篇文章主要介紹了vue實(shí)現(xiàn)的組件兄弟間通信功能,結(jié)合實(shí)例形式分析了vue兄弟組件間通信的原理與相關(guān)操作技巧,需要的朋友可以參考下2018-12-12
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)簡(jiǎn)單瀑布流布局，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-03-03
Element-UI組件實(shí)現(xiàn)面包屑導(dǎo)航欄的示例代碼
面包屑導(dǎo)航欄是一種用戶界面組件,用于展示用戶在網(wǎng)站或應(yīng)用中的路徑,它包括了從主頁(yè)到當(dāng)前頁(yè)面的鏈接序列,有助于用戶快速了解和導(dǎo)航至上級(jí)頁(yè)面,本文就來(lái)介紹一下Element-UI組件實(shí)現(xiàn)面包屑導(dǎo)航欄的示例代碼,感興趣的可以了解一下2024-09-09
Vue.js實(shí)現(xiàn)文件上傳壓縮優(yōu)化處理技巧
這篇文章主要介紹了Vue.js實(shí)現(xiàn)文件上傳壓縮優(yōu)化處理,本文給大家介紹兩種方法一種是借助canvas的封裝的文件壓縮上傳，二是使用compressorjs第三方插件實(shí)現(xiàn)，本文給大家介紹的非常詳細(xì)需要的朋友可以參考下2022-11-11
vue實(shí)現(xiàn)驗(yàn)證用戶名是否可用
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)驗(yàn)證用戶名是否可用，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-01-01
Vue實(shí)現(xiàn)頁(yè)面添加滿屏水印和去除水印功能
在一些特殊的應(yīng)用場(chǎng)景中,可能需要在網(wǎng)頁(yè)上添加水印以保護(hù)版權(quán)或標(biāo)識(shí)信息,本文將介紹如何在Vue項(xiàng)目中添加滿屏水印并實(shí)現(xiàn)去除水印的功能,文中通過(guò)代碼示例講解的非常詳細(xì),需要的朋友可以參考下2024-07-07