首页 > 建站教程 > 前端框架 >  elementUI el-table添加loading加载效果正文

elementUI el-table添加loading加载效果

elementUI的el-table在加载和切换页码时,没有加载动画会非常不好看,没有数据还会闪烁,加上加载动画会好看很多。el-table的v-loading属性可以指定显示隐藏loading效果,可以在加载的时候进行控制,element-loading-background属性可以定义加载动画的背景,element-loading-text属性指定加载提示文字,element-loading-spinner属性指定加载动画效果:
html:
<el-table
   v-loading = "isLoading"
   element-loading-background = "rgba(255, 255, 255, .5)"
   element-loading-text = "加载中,请稍后..."
   element-loading-spinner = "el-icon-loading">
</el-table>
data设置:
data(){
    return {
        isLoading:false
    }
}
请求示例:
methods:{
    getList() {
        //请求之前,开启loading
        this.isLoading = true;
        collieryList(1, 10).then(response => {
            //请求成功,关闭loading
            this.isLoading = false;
        }).catch(err => {
            //请求失败,关闭loading
            this.isLoading = false;
        })
    },
}