场景

1.保存提交按钮不小心点击了多次。
2.由于网络服务器卡等原因点击事件没有及时响应又点击了一次，造成数据的重复提交和保存，数据的异常。
3.resize、scroll，输入框内容校验等频繁操作。

原因 

由于axios提交数据为异步提交，点击提交按钮是通过xmlhttprequest向后端发送异步请求，发送请求后后端返回数据需要时间处理，如果第一次点击的请求尚未完成，又接二连三地提交了几次，同时后面发送的请求都被后台处理了，这种情况如果是读取数据不会有太大影响，但是涉及到数据提交保存或者提交之后多表数据处理就麻烦了，而且此类现象造成的数据都不正常，所以此种情况务必要避免。

解决方法 :

一.按钮禁用控制：

原理：当第一次点击按钮进入事件，按钮状态变为禁用状态，

<template>
  <!-- 按钮 -->
  <el-button type="primary" @click="publish" :disabled="disabledFlag">添加</el-button>
</template>

<script setup>
  const disabledFlag = ref(false);

  const publish = () => {
    // 调用接口之前禁用按钮，防止多次点击调用接口
    disabledFlag.value = true;
    // 调用接口进行添加填报数据
    axios({
      method: 'post',
      url: '',
      data: qs.stringify({}),
    })
      .then((res) => {
        // 接口返回后
        disabledFlag.value = false;
        ElNotification.success({
          title: 'Success',
          message: '添加成功',
          offset: 100,
        });
      })
      .catch((err) => {
        console.log(err);
        disabledFlag.value = false;
      });
  };
</script>

<style></style>

二. loading事件等待控制：

原理：当第一次点击按钮进入事件，打开loading函数进行等待，当请求返回后台数据后按钮再恢复至可点击状态或者loading关闭

<template>
  <!-- 按钮 -->
  <el-button type="primary" @click="publish" :loading="loading">添加</el-button>
</template>

<script setup>
  const loading = ref(false);

  const publish = () => {
    //打开loading等待
    loading.value = true;
    // 调用接口进行添加填报数据
    axios({
      method: 'post',
      url: '',
      data: qs.stringify({}),
    })
      .then((res) => {
        // 接口返回后
        loading.value = false;
        ElNotification.success({
          title: 'Success',
          message: '添加成功',
          offset: 100,
        });
      })
      .catch((err) => {
        console.log(err);
        loading.value = false;
      });
  };
</script>

 方法虽然笨了点，但是可以完全避免重复点击情况，此方法只有第一次点击调用接口返回数据后才会被点击