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