vue+element模態(tài)框中新增模態(tài)框和刪除功能
更新時間：2019年06月11日 10:49:29 作者：冬瓜先生
這篇文章主要介紹了vue+element模態(tài)框中新增模態(tài)框和刪除功能,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習或者工作具有一定的參考學(xué)習價值，需要的朋友們下面隨著小編來一起學(xué)習學(xué)習吧
實現(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 獲取當前行的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ù)組中添加當前行
}
);
},
// 刪除員工
delStaff(id, index) {
this._confirm("確定刪除嗎?", () => {
this.$post("/api/RoleMemberController/delOne", { id: id }, data => {
this.$message.success("刪除成功！");
this.staffList.splice(index, 1);//從數(shù)組中刪除當前行
});
});
},
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
Vue父組件向子組件傳值以及data和props的區(qū)別詳解
這篇文章主要介紹了Vue父組件向子組件傳值以及data和props的區(qū)別詳解，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習或者工作具有一定的參考學(xué)習價值，需要的朋友們下面隨著小編來一起學(xué)習學(xué)習吧2020-03-03
這篇文章主要介紹了vue-router路由懶加載及實現(xiàn)方式,路由懶加載的主要作用是將?路由對應(yīng)的組件打包成一個個的js代碼塊，只有在這個路由被訪問到的時候，才會加載對應(yīng)組件的代碼塊，需要的朋友可以參考下2022-12-12
這篇文章主要介紹了Vue如何監(jiān)聽元素寬高變化問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了vue模塊拖拽實現(xiàn)示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習或者工作具有一定的參考學(xué)習價值，需要的朋友們下面隨著小編來一起學(xué)習學(xué)習吧2019-03-03
過濾器是vue為開發(fā)者提供的功能，常用于文本的格式化，過濾器應(yīng)該被添加在JavaScrip表達式的尾部，由“管道符”進行調(diào)用，這篇文章通過案例給大家講解Vue過濾器介紹及使用方法，需要的朋友參考下吧2022-11-11
這篇文章主要為大家介紹了Vue3編程流暢技巧使用setup語法糖拒絕寫return的方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
這篇文章主要介紹了Vue.js動態(tài)添加、刪除選題的實例代碼,非常不錯具有參考借鑒價值，需要的朋友可以參考下2016-09-09
這篇文章主要介紹了詳解vue中v-on事件監(jiān)聽指令的基本用法，文中講解非常細致，代碼幫助大家更好的理解和學(xué)習，感興趣的朋友可以了解下2020-07-07
表格是前端非常常用的一個控件，本文主要為大家介紹了Vue3如何實現(xiàn)一個簡易的可以復(fù)制的表格，文中的示例代碼講解詳細，需要的可以參考一下2022-12-12
這篇文章主要介紹了vue中引用swiper輪播插件的方法,在需要使用swiper的組件里引入swiper，swiper的初始化放在mounted里。具體實例代碼大家跟隨腳本之家小編一起看看吧2018-08-08