调整删除方法 放弃使用el-popover 删除操作使用弹窗提示

web/src/view/example/customer/customer.vue

@@ -59,32 +59,12 @@
               icon="edit"
               @click="updateCustomer(scope.row)"
             >变更</el-button>
-            <el-popover
-              v-model="scope.row.visible"
-              placement="top"
-              width="160"
-            >
-              <p>确定要删除吗？</p>
-              <div style="text-align: right; margin-top: 8px;">
-                <el-button
-                  type="primary"
-                  link
-                  @click="scope.row.visible = false"
-                >取消</el-button>
-                <el-button
-                  type="primary"
-                  @click="deleteCustomer(scope.row)"
-                >确定</el-button>
-              </div>
-              <template #reference>
-                <el-button
-                  type="primary"
-                  link
-                  icon="delete"
-                  @click="scope.row.visible = true"
-                >删除</el-button>
-              </template>
-            </el-popover>
+            <el-button
+              type="primary"
+              link
+              icon="delete"
+              @click="deleteCustomer(scope.row)"
+            >删除</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -146,7 +126,7 @@ import {
 } from '@/api/customer'
 import WarningBar from '@/components/warningBar/warningBar.vue'
 import { ref } from 'vue'
-import { ElMessage } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
 import { formatDate } from '@/utils/format'
 
 defineOptions({
@@ -205,18 +185,23 @@ const closeDialog = () => {
   }
 }
 const deleteCustomer = async(row) => {
-  row.visible = false
-  const res = await deleteExaCustomer({ ID: row.ID })
-  if (res.code === 0) {
-    ElMessage({
-      type: 'success',
-      message: '删除成功'
-    })
-    if (tableData.value.length === 1 && page.value > 1) {
-      page.value--
+  ElMessageBox.confirm('确定要删除吗?', '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(async() => {
+    const res = await deleteExaCustomer({ ID: row.ID })
+    if (res.code === 0) {
+      ElMessage({
+        type: 'success',
+        message: '删除成功'
+      })
+      if (tableData.value.length === 1 && page.value > 1) {
+        page.value--
+      }
+      getTableData()
     }
-    getTableData()
-  }
+  })
 }
 const enterDialog = async() => {
   let res
@@ -244,5 +229,4 @@ const openDialog = () => {
 
 </script>
 
-
 <style></style>