vue?點擊刪除常用方式小結(jié)
更新時間:2022年04月25日 09:39:33 作者:Frontend-Arway
這篇文章主要介紹了vue?點擊刪除常用方式小結(jié),具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
點擊刪除常用方式
1、根據(jù)id刪除對應(yīng)數(shù)據(jù)
<!-- 點擊傳入當(dāng)前點擊的數(shù)據(jù) --> <el-button type="dangerous" @click="handleClickDelProduct(scope.row)">刪除</el-button>
//ES6 //根據(jù)id查找元素 findIndex //函數(shù)內(nèi)如果返回true,就結(jié)束遍歷并返回當(dāng)前index; //index如果沒有找到返回-1 ? handleClickDelProduct(row) { ? ? ? ? let index = this.newList.findIndex((product) => { ? ? ? ? ? return row.id == product.id ? ? ? ? }) ? ? ? ? if (index !== -1) { ? ? ? ? ? this.newList.splice(index, 1) ? ? ? ? } ? ? },
2、根據(jù)下標(biāo)刪除對應(yīng)數(shù)據(jù)
<!-- 點擊傳入當(dāng)前點擊的下標(biāo) --> ?? ?<div v-for="(item,index) in list" :key="index"> ?? ??? ?<div @click="deletes(index)"> ?? ??? ??? ?{{item.name}} ?? ??? ?</div> ?? ?</div>
//拿到當(dāng)前下標(biāo) 通過splice方法刪除當(dāng)前下標(biāo)所在數(shù)據(jù) //index就是點擊事件傳過來的參數(shù) 下標(biāo) ? ?deletes(index){ ?? ??? ?this.list.splice(index, 1) ?? ? }
3、通過接口方式刪除數(shù)據(jù)
<!-- 點擊傳入當(dāng)前點擊的數(shù)據(jù) --> ?<el-button type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">刪除</el-button>
//row獲取到點擊事件傳來的參數(shù) handleDelete(row) { ? ? ? this.$confirm("確定刪除?", "提示", { ? ? ? ? confirmButtonText: "確定", ? ? ? ? cancelButtonText: "取消", ? ? ? ? type: "warning", ? ? ? }) ? ? ? // 確認(rèn)刪除 ? ? ? ? .then(() => { ? ? ? ? //刪除接口只需要傳個id就行了 id是當(dāng)前點擊事件傳過來的的id? ? ? ? ? ? removedata({ ? ? ? ? ? ? id: row.id, ? ? ? ? ? }).then((res) => { ? ? ? ? ? ? if (res.code == 200) { ? ? ? ? ? ? ? this.$message.success("刪除成功"); ? ? ? ? ? ? ? //刪除成功 回調(diào)列表接口? ? ? ? ? ? ? ? this.getData(); ? ? ? ? ? ? } else { ? ? ? ? ? ? ? this.$message.error(res.msg); ? ? ? ? ? ? } ? ? ? ? ? }); ? ? ? ? }) ? ? ? ? //取消刪除 ? ? ? ? .catch(() => { ? ? ? ? ? this.$message({ ? ? ? ? ? ? type: "info", ? ? ? ? ? ? message: "已取消刪除", ? ? ? ? ? }); ? ? ? ? }); ? ? },
vue刪除功能
1、刪除
<el-table-column label="狀態(tài)"> // 獲取當(dāng)前行的所有數(shù)據(jù) ? <template slot-scope="scope"> ? // 在這里添加點擊事件方法 使用上邊獲取當(dāng)前行所有數(shù)據(jù) 傳入id值 ? ?? ?<el-button type="danger" icon="el-icon-delete" circle @click="delInfo(scope.row.id)"></el-button> ? ?</template> </el-table-column>
2、點擊事件方法
async delInfo (id) { this.$confirm('此操作將永久刪除該文件, 是否繼續(xù)?', '提示', { confirmButtonText: '確定', cancelButtonText: '取消', type: 'warning' }).then(async () => { // 調(diào)接口 賦值給 res const { data: res } = await this.$ajax.delete('users/' + id) // 判斷狀態(tài) 返回成功或失敗 if (res.meta.status !== 200) return this.$message.error('刪除失敗') this.$message.success('刪除成功') // 重新渲染頁面 this.getUserList() }).catch(() => { this.$message({ type: 'info', message: '已取消刪除' }) }) }
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
Vue實戰(zhàn)之項目開發(fā)時常見的幾個錯誤匯總
vue作為前端主流的3大框架之一,目前在國內(nèi)有著非常廣泛的應(yīng)用,下面這篇文章主要給大家介紹了關(guān)于Vue實戰(zhàn)之項目開發(fā)時常見的幾個錯誤匯總的相關(guān)資料,對大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2023-03-03Vue利用History記錄上一頁面的數(shù)據(jù)方法實例
這篇文章主要給大家介紹了關(guān)于Vue利用History記錄上一頁面的數(shù)據(jù)的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-11-11vue實現(xiàn)路由跳轉(zhuǎn)動態(tài)title標(biāo)題信息
這篇文章主要介紹了vue實現(xiàn)路由跳轉(zhuǎn)動態(tài)title標(biāo)題信息,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-06-06