vue关于读取queryParams.days第一次都是零的原因，点击刷新才能以正常的时间搜索数据

Question

代码如下

<template>
  <div v-if="flag" class="dashboard-editor-container">
    <el-card>
      <el-form :model="queryParams" ref="queryForm" :inline=!0 label-width="250px" size="small">
          <el-form-item label="显示尚未核销的手/账册 有效期小于" prop="days">
            <el-input-number v-model="queryParams.days" />  
          </el-form-item>
          <el-button type="primary" icon="el-icon-refresh" size="mini" @click="getList">刷新</el-button>
          <el-button type="primary" icon="el-icon-circle-check" size="mini" @click="saveDays">保存天数</el-button>
      </el-form>
    </el-card>
    <el-card style="margin-top: 10px">
      <el-row style="margin-top: 10px">
        <el-table :data="configList" stripe border
          @row-dblclick="handleDblclick">
          <el-table-column type="selection" width="55"> </el-table-column>
          <template v-for="(col,ck) in tableColumn">
            <el-table-column  :key="ck" v-if=col.isShow
              :label=col.label :prop=col.prop :width=col.width :type=col.type
              :align=col.align :fixed=col.fixed?col.fixed:false sortable="custom"
              :show-overflow-tooltip=col.showOverflowTooltip
              :formatter=col.formatter>
            </el-table-column>
          </template>
        </el-table>
        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList"/>
      </el-row>
    </el-card>
    <detail ref="details" @goBack="goBack" />
  </div>
</template>

<script>
import detail from "./npts/eml/detail";
import { getwarningData, getDays, updateDeptDays } from "@/api/npts/eml";
import imgView from "./npts/eml/img/index";
import headView from "./npts/eml/head/index";
import exgView from "./npts/eml/exg/index";
import lossView from "./npts/eml/loss/index";
export default {
  name: "Index",
  components: {detail,headView,imgView,exgView,lossView,updateDeptDays,getDays},
  data() {
    return {
      queryParams: {
        days: "",
        pageNum: 1,
        pageSize: 10
      },
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      seqNo: "",
      seqNos: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: false,
      // 总条数
      total: 0,
      // 参数表格数据
      configList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      flag: true,
      tableColumn:[
        {isShow:true,prop:"seqNo",label:"统一编号",width:170},
        {isShow:true,prop:"emlNo",label:"加工贸易手册编号",width:150},
        {isShow:true,prop:"statusName",label:"状态",width:120},
        {isShow:true,prop:"bizopEtpsno",label:"经营单位编码",width:150},
        {isShow:true,prop:"bizopEtpsNm",label:"经营单位名称",width:200},
        {isShow:true,prop:"rcvgdEtpsno",label:"加工单位编码",width:150},
        {isShow:true,prop:"rcvgdEtpsNm",label:"加工单位名称",width:200},
        {isShow:true,prop:"dclTypecdName",label:"申报类型",width:100},
        {isShow:true,prop:"impCtrtNo",label:"进口合同号",width:150},
        {isShow:true,prop:"inputTime",label:"录入日期",width:120},
        {isShow:true,prop:"validDate",label:"有效日期",width:120},
        {isShow:true,prop:"dclTime",label:"申报日期",width:120},
      ]
    };
  },
  created() {
    this.getList();
  },
  methods: {
    
    //刷新
    getList() {
      getwarningData(this.queryParams).then(response => {
        this.configList = response.rows;
        this.total = response.total;
        this.loading = false;
        this.getDeptDays();
      });
    },

    getDeptDays() {
      getDays().then(response => {
        this.queryParams.days = response.data;
      });
      // this.getList();
    },

    //保存天数
    saveDays() {
      updateDeptDays(this.queryParams.days).then(response => {
        if (response.code === 200) {
          this.msgSuccess("操作成功");
          this.getList();
        }
      });
    }
  }
};

</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;
  height: 100vh;
  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}
/deep/ .el-form-item__label {
  color: red;
}
@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>

Answer 1

有可能是接口响应的太慢，导致数据还没有返回的时候你就点击了保存按钮

 getDeptDays() {
      getDays().then(response => {
        this.queryParams.days = response.data;
        console.log(this.queryParams.days) //在这里打印一下接收到的参数，看到控制台输出该参数后在点击保存
      });
      // this.getList();
    },