elementui在表格/下来列表等展示数据的区显示加载中
1,先在data属性里定义1个loading属性,默认为false
data()(
return:{
loading:false }
}
2、在el-tabale 后面增加属性:
v-loading="loading" // 默认不显示加载 element-loading-text="正在加载中..." // 加载提示文字 element-loading-spinner="el-icon-loading" // el-icon-loading是element里面的加载图标,也可以使用iconfont element-loading-background="rgba(0, 0, 0, 0.8)" // 遮罩背景层颜色 3,在获取数据的函数里在发起请求之前让loading显示,请求失败和请求成功都不让显示 this.loading = true // 开启发起请求 const { data: res } = await this.$axios.get('/orders', { params: this.queryParams, }) if (res.meta.status !== 200) { this.$message.error(`获取订单列表数据出错:${res.meta.msg}`) this.loading = false return } console.log(res) this.loading = false this.orderList = res.data.goods