vue element Loading加载事件的使用

Loading 加载
1.子组件el-table中加入 以下代码
v-loading=“loading”
element-loading-text=“加载中”
element-loading-spinner=“el-icon-loading”
element-loading-background=“#fff”

<el-table
    v-loading="loading"
    element-loading-text="加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="#fff"
    :data="tableData"
    style="width: 100%">
</el-table>
props:{
  loading: {
      type: Boolean,
      default: true
    },
}

2.父组件引用:loading=“tableLoading”

<tabGrid 
:table-data="tableData" 
:table-columns="listColumns" 
:total="total" 
:loading="tableLoading" 
:maxHeight="630" />

data数据中放入变量

  data() {
        // 这里存放数据
        return {
        	tableLoading: false,
        }

查询数据时使用一般般需要的功能都是在数据还没加载出来的时候，显示加载动画，也就是：tableLoading 设置为 true，待数据加载完成之后在设置 tableLoading 为 false

 query() {
           	this.tableLoading = true;
            query(this.listQuery).then((res) => {
                this.tableLoading = false;
                this.tableData = res.rows
                this.total = res.total
                console.log(this.tableData);
            })
        },