关于vue.js:vueelement删除弹框

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,是不是很棒,让咱们一起致力走向巅峰!
//经典名言不服就是干,哪有那么多的为什么!