刷新按键支持点击后置灰

src/views/update/index.vue

@@ -11,6 +11,12 @@ const cinemaSearch = reactive({
 
 const cinemaSearchRef = ref()
 
+// 定义表格数据
+const tableData = ref([])
+
+let refresh_disable = ref(false)
+let refresh_loading = ref(false)
+
 //  数据校验部分
 const ip_validate = (rule, value, callback) => {
   const regex = new RegExp('((2(5[0-5]|[0-4]\\d))|[0-1]?\\d{1,2})(\\.((2(5[0-5]|[0-4]\\d))|[0-1]?\\d{1,2})){3}');
@@ -70,9 +76,18 @@ const resetSearch = (formEl) => {
   formEl.resetFields()
 }
 
+const refresh = () => {
+  refresh_disable.value = true;
+  refresh_loading.value = true;
+  get_table_data()
+  setTimeout(()=>{
+    refresh_disable.value = false;
+    refresh_loading.value = false;
+  }, 5000)
+}
 
 // 表格部分
-const tableData = ref([])
+
 
 async function get_table_data() {
   tableData.value = []
@@ -128,7 +143,7 @@ onMounted(
           <el-button @click="resetSearch(cinemaSearchRef)">重置</el-button>
         </el-form-item>
         <el-form-item>
-          <el-button @click="get_table_data()">刷新</el-button>
+          <el-button v-bind:disabled="refresh_disable" @click="refresh()" v-bind:loading="refresh_loading">刷新</el-button>
         </el-form-item>
 
       </el-col>