element ui:表單查詢時，點擊提交後，提交按鈕不可操做，防止重複提交

通常表單提交時，點擊提交後，整個表單都應該處於不可操做的狀態，爲了用戶體驗良好，咱們基本上會在表單的中間位置顯示loading 等提示字樣。（學習實踐記錄）

先建立一個表單提交的對話框（例子來源於element ui官網）

<el-dialog title="收貨地址" :visible.sync="dialogFormVisible" class="submit-test-dialog">
  <el-form :model="form">
    <el-form-item label="活動名稱" :label-width="formLabelWidth">
      <el-input v-model="form.name" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="活動區域" :label-width="formLabelWidth">
      <el-select v-model="form.region" placeholder="請選擇活動區域">
        <el-option label="區域一" value="shanghai"></el-option>
        <el-option label="區域二" value="beijing"></el-option>
      </el-select>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="submit">確 定</el-button>
  </div>
</el-dialog>

點擊肯定後校驗表單內容，而後提交表單內容給後端，同時表單對話框中出現「提交中」等字樣，實現方式以下。

submit(){
    const loadingObj = this.$loading({
          lock: true,
          text: '提交中...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)',
          target: document.querySelector('.submit-test-dialog')
    });

    //後端返回結果後，結束loadingObj，即loadingObj.close();
}

屬性含義能夠element ui官網中查找