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>      

export default {
  data() {
    return {
        listLoading: false,//查詢清單加載
    },
  },

  methods: {
    //定義方法
    historyAlarmList(){
        //如下（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("請求逾時!");
        });
    },