关于vue.js:vueelement删除弹框

1次阅读

共计 868 个字符，预计需要花费 3 分钟才能阅读完成。

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

正文完