Vue设置提示和警告弹出框实战案例

const handleDelete = (index, row) => {
  if (!isEmptyList(row.children)) {
    ElMessageBox.confirm('该分类下存在子分类，不可删除！', '提示', {
      type: 'warning',
      confirmButtonText: '确认'
    });
    return;
  }
  const id = row.groupId;
  selectResource(id).then(response => {
    if (!isEmptyList(response.data)) {
      ElMessageBox.confirm('该分类下已经分配资源，确定要删除吗?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function () {
        return deleteGroup(id);
      });
    } else {
      ElMessageBox.confirm('确认删除名称为"' + row.groupName + '"的数据项?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function () {
        return deleteGroup(id);
      });
    }
  });
};

const handleEdit = (index, row) => {
  resetForm();
  const id = row.groupId;
  selectResource(id).then(response => {
    if (!isEmptyList(response.data)) {
      ElMessageBox.confirm('该分类已经分配资源，不可修改！', '提示', {
        type: 'warning',
        confirmButtonText: '确认'
      });
      return;
    } else {
      dialogParam.type = row.type;
      caGroupTreeSelect(id);
      getCaGroupDetails(id).then(response => {
        caGroupForm.value = response.data;
        dialogParam.open = true;
        dialogParam.title = "修改分类";
      });
    }
  });
};