Vue中请求接口使用elementUI的loading的显示功能_vue elementui 只要是请求就加loading

今天实现一个简单的功能，也是工作当中遇到的，大概就是请求接口没返回数据的时候loading显示，返回数据后loading消失

• 首先在表格标签里引入loading样式，加载时的信息和绑定好表头和表格里面的数据

     :table-cols='tableColsMax'
     :table-data='tableData'
     v-loading="loading"
     element-loading-text="拼命加载中"
     element-loading-spinner="el-icon-loading"
     element-loading-background="rgba(0, 0, 0, 0.3)"
1
2
3
4
5
6

• 然后在data中定义好一些数据，loading的初始值为真，test是测试用的假数据

 data() {
    return {
      tableColsMax: [], //表头数据
      tableData: [], //表格数据
      loading: true,
      testCols: [
        {
          label: '站名',
          prop: 'dataName',
        },
        { 
          label: '2-01',
          prop: 'one',
        },
        { 
          label: '2-02',
          prop: 'two',
        },
        { 
          label: '2-03',
          prop: 'three',
        },
      ],
      testData: [
        { dataName: '111', one: '正常',two: '正常', three: '不正常' },
        { dataName: '111', one: '正常',two: '不正常', three: '不正常' },
        { dataName: '111', one: '不正常',two: '正常', three: '不正常' },
      ],
    }
 }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

• 这是methods里面的，然后这里我搞了一个定时器，模拟请求到数据之后把数据放入

    getData() {
      setTimeout(() => {
        this.tableColsMax = this.testCols
        this.tableData = this.testData
      }, 4000)
    },
    testChange() {
      this.loading = false
    }
1
2
3
4
5
6
7
8
9

• 然后使一开始方法就被调用

     mounted() {
       this.getData()
     }
1
2
3

• 最后这里也很简单，用watch监听表格数组变化，然后直接调用之前methods里定义好的testChange

     watch: {
       tableData: 'testChange'
     }
1
2
3

• 然后这是页面刚刷新时的样子

• 四秒过后表格收到了数据然后loading消失