vue+element模態(tài)框中新增模態(tài)框和刪除功能
更新時間：2019年06月11日 10:49:29 作者：冬瓜先生
這篇文章主要介紹了vue+element模態(tài)框中新增模態(tài)框和刪除功能,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
實現(xiàn)效果如下
結(jié)構(gòu)
<el-table-column sortable label="操作">
<template slot-scope="scope">
<el-button type="primary" @click="getMembers(scope.row.id)">成員</el-button>
<el-buttontype="primary" @click="delRole(scope.row.id, scope.$index)">刪除</el-button>
</template>
</el-table-column>
//scope.$index 獲取當(dāng)前行的index
// 打開新增成員
openAddStaff() {
this.getAllStaff();
},
// 確定新增
addStaff() {
if (!this.user) {
this.$message.error("請選擇用戶！");
return;
}
this.$post(
"/api/RoleMemberController/add",
{ userId: this.user.split("/")[0], roleId: this.roleId },
data => {
console.log(data,111)
this.$message.success("添加成功！");
this.dialogAddStaffVisible = false;
let item = {
id: data.rm.id,
userId: data.rm.userId,
userCname: this.user.split("/")[1]
};
this.staffList.push(item);//從數(shù)組中添加當(dāng)前行
}
);
},
// 刪除員工
delStaff(id, index) {
this._confirm("確定刪除嗎?", () => {
this.$post("/api/RoleMemberController/delOne", { id: id }, data => {
this.$message.success("刪除成功！");
this.staffList.splice(index, 1);//從數(shù)組中刪除當(dāng)前行
});
});
},
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
vue中常遇到第三方j(luò)s,這篇文章主要給大家介紹了關(guān)于Vue項目中如何引入本地第三方JS庫的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06
在Vue中用canvas實現(xiàn)二維碼和圖片合成海報的方法
這篇文章主要介紹了在Vue中用canvas實現(xiàn)二維碼和圖片合成海報的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
vue組件實現(xiàn)移動端九宮格轉(zhuǎn)盤抽獎
這篇文章主要為大家詳細(xì)介紹了vue組件實現(xiàn)移動端九宮格轉(zhuǎn)盤抽獎，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-10-10
VUE實現(xiàn)分布式醫(yī)療掛號系統(tǒng)預(yù)約掛號首頁步驟詳情
這篇文章主要為大家介紹了VUE實現(xiàn)分布式醫(yī)療掛號系統(tǒng)預(yù)約掛號首頁步驟詳情，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-04-04
解決webpack+Vue引入iView找不到字體文件的問題
今天小編就為大家分享一篇解決webpack+Vue引入iView找不到字體文件的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vue.js實現(xiàn)插入數(shù)值與表達(dá)式的方法分析
這篇文章主要介紹了vue.js實現(xiàn)插入數(shù)值與表達(dá)式的方法,結(jié)合實例形式分析了vue.js常見的3種插入數(shù)值實現(xiàn)方式,并總結(jié)了vue.js插值與表達(dá)式相關(guān)使用技巧,需要的朋友可以參考下2018-07-07
本文主要介紹了Webpack和Vite的區(qū)別小結(jié)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
Element-ui Drawer抽屜按需引入基礎(chǔ)使用
這篇文章主要為大家介紹了Element-ui Drawer抽屜按需引入基礎(chǔ)使用，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
Vue.js實現(xiàn)一個自定義分頁組件vue-paginaiton
這篇文章主要為大家詳細(xì)介紹了Vue.js實現(xiàn)一個自定義分頁組件vue-paginaiton的具體代碼,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-09-09
本文主要介紹了Vue顯示圖片的幾種方式小結(jié)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02