Vue+ElementUI操作确认框及提示框的使用

在进行数据增删改查操作中为保证用户的使用体验,通常需要显示相关操作的确认信息以及操作结果的通知信息。文章以数据的下载和删除提示为例进行了简要实现,点击下载以及删除按钮,会出现对相关信息的提示,操作结果如下所示。

点击删除按钮,将会显示以下提示框。

点击取消按钮,提示已取消删除。

点击确定按钮,若删除成功则提示如下,删除失败则同理。

通过$this.confirm弹出操作提示界面,实现操作的确认。

通过$this.message弹出状态提示界面,提示操作是否成功。

界面代码如下所示:

html 复制代码
<el-table-column label="操作">
	<template slot-scope="scope">
		<el-button type="primary" round @click="downloadDataset">
			<i class="el-icon-edit"></i>下载
		</el-button>
		<el-button type="success" round>
			<i class="el-icon-edit"></i>编辑
		</el-button>
		<el-button type="danger" @click="deleteDatasetById(scope.row)" round>
			<i class="el-icon-document-delete"></i>删除
		</el-button>
	</template>
</el-table-column>

script代码如下所示:

javascript 复制代码
<script>
export default {
	//删除数据集
    deleteDatasetById(param) {
      let id = param.id //当前行对应数据的id
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        api.deleteDatasetById(id).then(res => {
          if (res.code === 20021) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.getDatasets()
          } else {
            this.$message({
              type: 'error',
              message: '删除失败,请重试!'
            });
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

    // 下载数据集
    downloadDataset() {
      this.$confirm('即将进行当前数据集的下载操作,是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '下载成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消下载'
        });
      })
    },
}
<script>
相关推荐
tekin25 分钟前
Go、Java、Python、C/C++、PHP、Rust 语言全方位对比分析
java·c++·golang·编程语言对比·python 语言·php 语言·编程适用场景
whisperrr.1 小时前
【JavaWeb12】数据交换与异步请求:JSON与Ajax的绝妙搭配是否塑造了Web的交互革命?
前端·ajax·json
李长渊哦1 小时前
Java 虚拟机(JVM)方法区详解
java·开发语言·jvm
烂蜻蜓2 小时前
前端已死?什么是前端
开发语言·前端·javascript·vue.js·uni-app
陌殇殇3 小时前
002 SpringCloudAlibaba整合 - Feign远程调用、Loadbalancer负载均衡
java·spring cloud·微服务
猎人everest3 小时前
SpringBoot应用开发入门
java·spring boot·后端
谢尔登3 小时前
Vue 和 React 的异同点
前端·vue.js·react.js
山猪打不过家猪5 小时前
ASP.NET Core Clean Architecture
java·数据库·asp.net
AllowM5 小时前
【LeetCode Hot100】除自身以外数组的乘积|左右乘积列表,Java实现!图解+代码,小白也能秒懂!
java·算法·leetcode
不会Hello World的小苗6 小时前
Java——列表(List)
java·python·list