vue+element删除弹框
1.开发环境 vue+element
2.电脑系统 windows 10 专业版
3.在开发的过程中,在我的项目中咱们常常会做一些删除的操作!怎么做一个难看又实用的删除的操作呢?接下来看我操作!
点击删除,呈现上面图片的成果。
//实现办法,如下:
4.在 methods 中增加如下代码:
/** 删除按钮操作 */ handleDel(row) { const ids = row.id || this.ids; this.$confirm('是否确认删除用户编号为"' + ids + '"的数据项?', "正告", { confirmButtonText: "确定", cancelButtonText: "勾销", type: "warning" }).then(function() { return delUser(ids); }).then(() => { this.getList(); this.msgSuccess("删除胜利"); }).catch(function() {}); var ss={ id:ids } chenjbdelete(ss).then(res=>{ console.log("删除胜利啦!"); console.log(res); }) },5.在 template中增加如下代码:
<el-table-column fixed="right" label="操作" width="140"> <template slot-scope="scope"> <el-button @click="handleEdit(scope.row)" type="text" size="small"> 批改 </el-button> <el-button @click="handleDel(scope.row)" type="text" size="small"> 移除 </el-button> <!-- 批改 按钮--> </template> </el-table-column> 6.而后你点击删除就能看到对应的成果啦,是不是很nice,是不是很棒,让咱们一起致力走向巅峰!
//经典名言不服就是干,哪有那么多的为什么!