技術標籤：vue.js

在avue官方文件中的防重提交：

程式碼如下:

<avue-form :option="option" v-model="form" @submit="handleSubmit"></avue-form>

export default {
  data(){
    return {
       form:{
          text:'動態內容1'
       },
       option:{
          column: [{
              label:
 
 "使用者名稱",
              prop: "username"
          }]
       }
    }
  },
  methods:{
    handleSubmit(form,done){
       this.$message.success('3s後關閉');
       //done()可以關閉按鈕的載入
       setTimeout(()=>{
          done()
       },3000)
    }
  }
}

題外話：當表單校驗時，提交時如果校驗不通過，可以通過done()來再次進行提交。

自定義表單按鈕防重提交

程式碼如下：

<avue-form :option="option" v-model="form">
	<template slot-scope="scope" slot="menuForm">
	   <el-button type="primary" @click="handleSubmit" :loading="btnLoading">提交</el-button>
	</template>
 

</avue-form>

export default {
  data(){
    return {
       form:{
          text:'動態內容1'
       },
       option:{
          "column": [{
              label: "使用者名稱",
              prop: "username"
          }],
          //自定義按鈕
          "menuBtn": true,
          //原有提交按鈕不顯示
          "submitBtn": false,
       },
       //自定義按鈕載入
       btnLoading: false,
    }
  },
  methods:{
    handleSubmit(){
    	//點提交時載入開啟
       this.btnLoading = true;
       this.$message.success('3s後關閉');
       setTimeout(()=>{
          //3s後加載關閉
          this.btnLoading = false;
       },3000)
    }
  }
}

題外話：當提交給後臺時，一般點選提交時載入按鈕設為true，當介面返回成功後加載按鈕再設為false，表示可以再次提交。防止重複調取後臺介面。