Vue中请求接口使用elementUI的loading的显示功能

Vue中请求接口使用elementUI的loading的显示功能

要实现的功能描述：就是请求接口没返回数据的时候loading显示，返回数据后loading消失

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

   :data="tableData"
   v-loading="loading"
   element-loading-text="拼命加载中"
   element-loading-spinner="el-icon-loading"
   element-loading-background="rgba(0, 0, 0, 0.3)"
   

2. 定义值
   不要忘记定义loading的值

   data() {
         return {
           tableData: [{
             date: '2016-05-03',
             name: '王小虎',
             address: '上海市普陀区金沙江路 1518 弄'
           }, {
             date: '2016-05-02',
             name: '王小虎',
             address: '上海市普陀区金沙江路 1518 弄'
           }, {
             date: '2016-05-04',
             name: '王小虎',
             address: '上海市普陀区金沙江路 1518 弄'
           }],
           loading: false
         };
       }
   

3. 请求数据，得到响应后加载框消失

   methods: {
   	getLoading(){
   		this.loading = true;
   		axios({
   		    url: url,
   		    method:'get',
   		}).then(function (res) {
   		    if (res.code === 200) {
   		    	this.loading = false
   		    }
   		}).catch(function (error) {
   		    console.log(error);
   		});
   	}
   }
   

效果图：