在进行数据增删改查操作中为保证用户的使用体验,通常需要显示相关操作的确认信息以及操作结果的通知信息。文章以数据的下载和删除提示为例进行了简要实现,点击下载以及删除按钮,会出现对相关信息的提示,操作结果如下所示。
点击删除按钮,将会显示以下提示框。
点击取消按钮,提示已取消删除。
点击确定按钮,若删除成功则提示如下,删除失败则同理。
通过
$this.confirm
弹出操作提示界面,实现操作的确认。
通过$this.message
弹出状态提示界面,提示操作是否成功。
界面代码如下所示:文章来源:https://www.toymoban.com/news/detail-612571.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代码如下所示:文章来源地址https://www.toymoban.com/news/detail-612571.html
<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>
到了这里,关于Vue+ElementUI操作确认框及提示框的使用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!