前端封装删除数据提示框代码-CFANZ编程社区

之前专注于写java后端代码，最近开始兼顾写前端代码，当然，我是工作需要迫不得已才写的前端，框架用的是vue3、vite,TypeScript我还不会用，后续有时间再研究研究。

优化前

刚开始写删除表格数据的时候我是点击删除按钮直接调用后台删除接口，然后数据就被删了，后来发现操作的时候太不友好，万一我误点删除按钮，你直接就删除数据就成误操作，虽然可以逻辑删除恢复数据，但这样做太不友好而且可能带来不必要的麻烦，所以还是加个删除确认的提示框吧。在页面引入ElMessageBox 加了删除的提示框

代码如下

import { ElMessage, ElMessageBox } from 'element-plus'

      // 删除
    const removeEdit = (row) => {
      ElMessageBox.confirm('确认删除？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const ids = []
        ids.push(row.id)
        remove(ids).then(res => {
          if(res.code == 200){
	    ElMessage.success('恭喜您，删除成功！')
            getTableData()
          }else{
            ElMessage.error("后台错误")
          }
        })
      }).catch(() => {
        ElMessage({
          type: 'info',
          message: '已取消'
        })
      })
    }

效果

确定删除
取消删除

这样操作起来就正常了，但是每个页面的每个表格删除数据都这么写就比较烦，因为弹框提示部分是重复性代码，能不能提出来作为公共代码封装一下呢？（作为java程序员，封装、继承、多态这三大特性是记得死死的，这里就用封装的思想，嘿嘿）接下来就封装一下吧

封装后

在utils包下新建个messageBox.js文件，代码如下

import { ElMessageBox, ElMessage } from 'element-plus';

function confirmDelete(ok) {
  ElMessageBox.confirm(
    '确定删除此数据吗?',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(() => {
    ok();
    ElMessage({
      type: 'success',
      message: '删除成功！',
    });
  }).catch((err) => {
    ElMessage({
      type: 'info',
      message: '取消操作' ,
    });
  });
}

export { confirmDelete };

页面引用

  <el-table :data="tableData" :max-height="tableHeight" border>
        <el-table-column type="index" width="55" label="序号"></el-table-column>
        <el-table-column prop="year" min-width="150" label="年份"></el-table-column>
        <el-table-column prop="week" min-width="150" label="周别">
          <template #default="scope">第{{ scope.row.week }} 周</template>
        </el-table-column>
        <el-table-column prop="productName" min-width="150" label="归属产品"></el-table-column>
        <el-table-column prop="code" min-width="150" label="物料编码"></el-table-column>
        <el-table-column prop="name" min-width="150" label="物料名称"></el-table-column>
        <el-table-column prop="unit" min-width="150" label="单位"></el-table-column>
        <el-table-column prop="specification" min-width="150" label="规格"></el-table-column>
        <el-table-column prop="quantityDemanded" min-width="150" label="预计使用量"></el-table-column>
        <el-table-column prop="operator" label="操作人" min-width="100"></el-table-column>
        <el-table-column prop="operateTime" label="操作时间" min-width="150"></el-table-column>
        <el-table-column fixed="right" label="操作" width="120">
          <template #default="scope">
            <el-button type="primary" icon="el-icon-edit-outline" @click="handleEdit(scope.row)">编辑</el-button>
            <i class="el-icon-delete" @click="removeEdit(scope.row)"></i>
          </template>
        </el-table-column>
      </el-table>

import { confirmDelete } from '@/utils/messageBox'

    // 删除
    const removeEdit = (row) => {
      confirmDelete(
        () => {
          const ids = []
          ids.push(row.id)
          remove(ids).then(res => {
            if (res.code == 200) {
              //刷新数据
              getTableData()
            } else {
              ElMessage.error("后台错误")
            }
          })
        }
      )
    }

之后其他页面再删除数据就不用写弹窗提示的重复性代码了，引入confirmDelete传自己页面的删除逻辑就可以了