1026 请求接口时展示loading效果

// 接口请求数据
    getData() {
    
    
      return new Promise((resovle, reject) => {
    
    
        console.log('reject', reject);
        this.loading = true;
        this.tableLoading = true;
        testCnode().then(res => {
    
    
          // console.log('res1',res)
          if (res.data.success) {
    
    
            resovle(res);
          }
        });
      });
    },

    onSearch() {
    
    
      this.getData().then(res => {
    
    
        if (res.data.success) {
    
    
          let tableData = res.data.data;
          tableData.forEach((ele, index) => {
    
    
            ele.key = tableData[index].id;
          });
          this.data = tableData;
          this.loading = false;
          this.tableLoading = false;
          message.success('请求成功');
        }
      });
    },
		<a-button type='primary' icon='search' on-click={this.onSearch} loading={this.loading}>
          搜索
        </a-button>
        <div style='height:500px'>
          <a-table
            bordered
            scroll={
     
     {
     
      y: 400 }}
            columns={this.columns}
            loading={this.tableLoading}
            data-source={this.data}
            row-selection={
     
     {
     
      selectedRowKeys: this.selectedRowKeys, onChange: this.onChange }}
            scopedSlots={this.scopedSlots()}
          ></a-table>
        </div>

在这里插入图片描述

Guess you like

Origin blog.csdn.net/qq_45989814/article/details/120982005