v-loading 保存提交时等待

最新推荐文章于 2024-04-03 11:49:11 发布

KaNoha33

最新推荐文章于 2024-04-03 11:49:11 发布

阅读量196

点赞数

分类专栏：知识点学习文章标签： html servlet javascript

本文链接：https://blog.csdn.net/Mr_yzd233/article/details/130945051

版权

知识点学习专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文章展示了如何在Vue.js应用中使用v-loading指令管理加载状态，结合el-form和el-button组件处理表单数据，包括保存、提交和取消操作。在数据交互时，通过isLoading变量控制加载动画的显示，并进行API调用保存和提交数据。

摘要由CSDN通过智能技术生成

v-loading="isLoading "

<template></template>

<div class="body" v-loading="isLoading ">

<!--    法律法规-->
    <div class="from">
      <el-row style="padding-left: 15px">
        <el-form :model="formData" ref="refQueryCondition" label-width="auto" style="width:100%;">
          <el-row style="margin-top:5px;">
            <el-col :span="8">
              <el-form-item label="名称：" prop="ruleName">
                <span>{{formData.ruleName}}</span >
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-row>
    </div>

<!--保存提交返回-->
    <div style="text-align:center;margin-top: 20px"  v-loading="isLoading ">
      <el-button type="primary" icon="el-icon-save"  @click="save()" v-if="flag === 'edit'">保存</el-button>
      <el-button type="primary" icon="iconfont iconicon_submit" style="margin-left: 20px"   @click="submit()">提交</el-button>
      <el-button type="primary" icon="iconfont iconicon_cancel" style="margin-left: 20px" @click="cancel()" >返回</el-button>
    </div>
    
  </div>

<script></script>

data(){
    return{
      isLoading :false,
    }
  },

methods:{

//保存
    save() {
      this.isLoading = true;

      this.formData.listRuleTerms = this.tableData;
      this.formData.appId = this.appId;
      this.$post("/emop/project/rule_info/save",this.formData, (data) => {
        this.$message.success('保存成功！')
        this.goPage(this.backUrl, {})
      }, () => {
        this.isLoading = false;
      });
    },

}