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官網中查找