优秀企业门户网站建设,网站建设软件公司,免费发布产品信息网站,自己怎么建个优惠网站在进行数据增删改查操作中为保证用户的使用体验#xff0c;通常需要显示相关操作的确认信息以及操作结果的通知信息。文章以数据的下载和删除提示为例进行了简要实现#xff0c;点击下载以及删除按钮#xff0c;会出现对相关信息的提示#xff0c;操作结果如下所示。 点击…在进行数据增删改查操作中为保证用户的使用体验通常需要显示相关操作的确认信息以及操作结果的通知信息。文章以数据的下载和删除提示为例进行了简要实现点击下载以及删除按钮会出现对相关信息的提示操作结果如下所示。 点击删除按钮将会显示以下提示框。 点击取消按钮提示已取消删除。 点击确定按钮若删除成功则提示如下删除失败则同理。 通过$this.confirm弹出操作提示界面实现操作的确认。 通过$this.message弹出状态提示界面提示操作是否成功。 界面代码如下所示
el-table-column label操作template slot-scopescopeel-button typeprimary round clickdownloadDataseti classel-icon-edit/i下载/el-buttonel-button typesuccess roundi classel-icon-edit/i编辑/el-buttonel-button typedanger clickdeleteDatasetById(scope.row) roundi classel-icon-document-delete/i删除/el-button/template
/el-table-columnscript代码如下所示
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
