vue调取查询接口的过程中加入loading加载效果

目标需求：在历史查询列表页面中加入查询的转圈的loading加载动画。

目标实现：

（1）给el-table绑定加载动画 v-loading="listLoading"

  <el-table
        v-loading="listLoading"
        :data="dataList"
        border
        :max-height="scrollTableHeight"
        @selection-change="dataListSelectionHandle"
        ref="recordTable"
        style="width: 100%"
      >
        <el-table-column
          type="selection"
          width="55"
          header-align="center"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="plantName"
          label="站点名称"
          width="180"
          header-align="center"
          align="center"
          :show-overflow-tooltip="true"
        ></el-table-column>
    </el-table>

（2）定义变量：

export default {
  data() {
    return {
        listLoading: false,//查询列表加载
    },
  },

  methods: {
    //定义方法
    historyAlarmList(){
        //如下（3）
    }
  }

}

（3）在查询的接口中实现：

//历史报警
    historyAlarmList() {
      let _this = this,
        paramsData = {
          pageNum: _this.page,
          pageSize: _this.limit,
          startTime: _this.dataForm.startTime,
          endTime: _this.dataForm.endTime,
          alarmMsg: _this.dataForm.alarmMsgTang,
          sort: "id desc", //倒序
        },
        urlHis = "xiaoming/msg";//这个只是接口，不展示真实的
      _this.dataList = []; //清空
      _this.total = 0;
      _this.listLoading = true;//激活加载效果
      _this.$http
        .get(urlHis, {
          params: paramsData,
        })
        .then(({ data: res }) => {
          _this.listLoading = false;//去掉加载效果
          if (res.code != 0) {
            return _this.$message.error(res.msg);
          }
          if(res.data.rows.length == 0){
             return _this.$message.warning('当前查询为空!');
          }
          if (res.data.rows.length > 0) {
            _this.page = paramsData.pageNum; //为当前页赋值
            let data = res.data.rows;
            for (let item of data) {
              let obj = {
                id: item.id,
                alaarmType:
                  item.alaarmType == 0
                    ? "变位"
                    : item.alaarmType == 1
                    ? "超限"
                    : item.alaarmType == 2
                    ? "离线"
                    : "SOE", //报警类型 0 变位  1 超限 2 离线 3SOE'
                alarmTime: item.alarmTime, //产生时间
                alarmMsg: item.alarmMsg, //报警内容
                confirmStatu: item.confirmStatu, //确认状态
                confirmUser: item.confirmUser, //确认人
                confirmTime: item.confirmTime, //确认时间
                devId: item.devId,
              };
              _this.dataList.push(obj);
            }
            _this.total = Number(res.data.total);
          }
        })
        .catch((error) => {
          _this.listLoading = false;//如果捕获到错误去掉加载效果
          console.log(error);
          _this.$message.error("请求超时!");
        });
    },

在方法中调取接口的前面加入：_this.listLoading = true 以达到激活加载效果的目的，接口调取成功的then中和调取失败的error中加入：_this.listLoading = false 去掉加载效果。是不是很简单就实现了！