feat: #10000 表格数据加载显示优化

This commit is contained in:
赵世界 2022-09-19 11:10:05 +08:00
parent a853e1ecf4
commit 5f3c64ed88
9 changed files with 64 additions and 47 deletions

View File

@ -36,6 +36,7 @@ instance.interceptors.response.use(
}
},
(error) => {
NProgress.done();
// 对响应错误做点什么
if (error.response.status === 400) {
Message({

View File

@ -75,8 +75,8 @@
</div>
<!-- 表格 -->
<el-table ref="multipleTable" :data="tableData" class="table" tooltip-effect="dark" style="width: 100%"
@selection-change="handleSelectionChange" max-height="1500">
<el-table v-loading="loading" ref="multipleTable" :data="tableData" class="table" tooltip-effect="dark"
style="width: 100%" @selection-change="handleSelectionChange" max-height="1500">
<!-- 多选框 -->
<el-table-column type="selection"></el-table-column>
<el-table-column label="商品信息" width="300">
@ -385,6 +385,7 @@ export default {
radio: "", //
brand: [], //
cate: [], //
loading: true,
tableData: [], //
shopsData: [], //
sku_code: {}, //
@ -524,6 +525,7 @@ export default {
this.sku_code = {
sku_code: this.shopsData,
};
this.loading = false;
});
},

View File

@ -5,7 +5,7 @@
<!-- 列表 -->
<div class="table" style="margin-top: 10px">
<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
<el-table v-loading="loading" ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
@selection-change="handleSelectionChange">
<el-table-column prop="name" label="商品种类"> </el-table-column>
<el-table-column prop="" label="操作">
@ -64,6 +64,7 @@ export default {
data() {
return {
id: "", //id
loading: true,
tableData: [],
multipleSelection: [],
dialogFormVisible: false,
@ -174,6 +175,7 @@ export default {
this.tableData = res.data.data;
this.Paginationdata = res.data.meta;
});
this.loading = false;
},
},
};

View File

@ -50,7 +50,7 @@
<!-- 表格 -->
<el-card style="margin-top: 10px" class="box-card">
<el-table :data="tableData" border style="width: 100%">
<el-table v-loading="loading" :data="tableData" border style="width: 100%">
<el-table-column prop="id" label="序号" width="75"> </el-table-column>
<el-table-column prop="module" label="模块" width="70"> </el-table-column>
<el-table-column prop="action" label="操作" width="70"> </el-table-column>
@ -292,7 +292,7 @@ export default {
userId: "",//id()
},
value1: "", //
loading: true,
tableData: [], //
Paginationdata: {}, //
current_page: 1, //
@ -310,6 +310,7 @@ export default {
this.tableData = res.data.data;
this.Paginationdata = res.data.meta;
});
this.loading = false;
},
//

View File

@ -44,7 +44,7 @@
<!-- 表格 -->
<el-card style="margin-top: 10px">
<el-table :data="tableData" style="width: 100%" border>
<el-table v-loading="loading" :data="tableData" style="width: 100%" border>
<el-table-column prop="id" label="序号" width="70"> </el-table-column>
<el-table-column prop="created_at" label="时间" width="200">
</el-table-column>
@ -109,6 +109,7 @@ export default {
userId: "",
},
value1: "", //
loading: true,
tableData: [], //
Paginationdata: {}, //
current_page: 1, //
@ -133,6 +134,7 @@ export default {
this.tableData = res.data.data;
this.Paginationdata = res.data.meta;
});
this.loading = false;
},
//

View File

@ -27,7 +27,7 @@
</el-card>
<el-card style="margin-top: 10px">
<el-table ref="multipleTable" :data="tableData" style="width: 100%">
<el-table v-loading="loading" ref="multipleTable" :data="tableData" style="width: 100%">
<el-table-column label="店铺名称">
<template slot-scope="scope">
{{ scope.row.shop.name }}
@ -76,6 +76,7 @@ export default {
goods_name: "",
shop_id: "",
},
loading: true,
tableData: [],
Paginationdata: {}, //
current_page: 1, //
@ -107,6 +108,7 @@ export default {
storeList(page).then((res) => {
this.shops = res.data.data;
});
this.loading = false;
},
//
handleSizeChange(val) {

View File

@ -4,7 +4,7 @@
<el-button type="primary" @click="handAdd">新增</el-button>
<div class="table" style="margin-top: 10px">
<el-table :data="tableData" style="width: 100%">
<el-table v-loading="loading" :data="tableData" style="width: 100%">
<el-table-column prop="id" label="ID" width="180"> </el-table-column>
<el-table-column prop="name" label="店铺名称" width="180">
</el-table-column>
@ -79,6 +79,7 @@ export default {
plat_id: "",
},
storeId: [], // id
loading: true,
tableData: [],
Paginationdata: {}, //
current_page: 1, //
@ -123,6 +124,7 @@ export default {
this.tableData = res.data.data;
this.Paginationdata = res.data.meta;
});
this.loading = false
},
//

View File

@ -22,7 +22,7 @@
<!-- 角色列表 -->
<div class="table" style="margin-top: 10px">
<el-table :data="tableList" style="width: 100%">
<el-table v-loading="loading" :data="tableList" style="width: 100%">
<el-table-column prop="id" label="ID"> </el-table-column>
<el-table-column prop="name" label="角色名称"> </el-table-column>
<el-table-column label="权限内容">
@ -63,6 +63,7 @@ export default {
data() {
return {
id: "", //id
loading: true,
tableList: [], //
rolePermissions: [],
newrole: "", //input
@ -90,6 +91,7 @@ export default {
roleList().then((res) => {
this.tableList = res.data.data;
});
this.loading = false;
},
//
@ -156,4 +158,5 @@ export default {
</script>
<style lang="scss" scoped>
</style>

View File

@ -77,7 +77,7 @@
<!-- 用户列表 -->
<div class="table" style="margin-top: 10px">
<template>
<el-table :data="tableList" style="width: 100%">
<el-table v-loading="loading" :data="tableList" style="width: 100%">
<el-table-column prop="id" label="ID"></el-table-column>
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column label="角色">
@ -119,6 +119,7 @@ export default {
id: "",
dialogVisible: false, //
editVisible: false, //
loading: true,
tableList: [], //
from: {
//
@ -168,6 +169,7 @@ export default {
this.tableList = res.data.data;
this.Paginationdata = res.data.meta;
});
this.loading = false;
},
//