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

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

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

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

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

通过$this.confirm弹出操作提示界面，实现操作的确认。
通过$this.message弹出状态提示界面，提示操作是否成功。

界面代码如下所示：

<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代码如下所示：

<script>
export default {//删除数据集deleteDatasetById(param) {let id = param.id //当前行对应数据的idthis.$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>