fix: 卡片式列表高度调整,增加no-data提示

This commit is contained in:
chenjinsong
2022-01-06 17:59:23 +08:00
parent 7f18704c4f
commit 7562d1a234
2 changed files with 21 additions and 3 deletions

View File

@@ -16,8 +16,8 @@
justify-content: flex-start; justify-content: flex-start;
border-radius: 2px; border-radius: 2px;
width: calc(100% - 10px); width: calc(100% - 10px);
height: calc(100% - 40px); height: 100%;
overflow: inherit; overflow: auto;
} }
.entity-list--list { .entity-list--list {
display: flex; display: flex;

View File

@@ -7,6 +7,7 @@
<!-- 列表式 --> <!-- 列表式 -->
<template v-if="listMode === 'list'"> <template v-if="listMode === 'list'">
<div class="entity-list--list"> <div class="entity-list--list">
<div class="no-data" v-if="noData">No data</div>
<div v-if="!isCollapse" @click="collapse" class="cn-entity__shadow"></div> <div v-if="!isCollapse" @click="collapse" class="cn-entity__shadow"></div>
<entity-row <entity-row
v-for="(data, index) in listData" v-for="(data, index) in listData"
@@ -23,6 +24,7 @@
<!-- 卡片式 --> <!-- 卡片式 -->
<template v-else-if="listMode === 'block'"> <template v-else-if="listMode === 'block'">
<div class="entity-list--block"> <div class="entity-list--block">
<div class="no-data" v-if="noData">No data</div>
<entity-card <entity-card
v-for="(data, index) in listData" v-for="(data, index) in listData"
:entity="data" :entity="data"
@@ -63,7 +65,8 @@ export default {
isCollapse: true, isCollapse: true,
collapseIndex: 0, collapseIndex: 0,
tableId: 'entityList', tableId: 'entityList',
listDataCopy: [] listDataCopy: [],
noData: false
} }
}, },
methods: { methods: {
@@ -78,6 +81,21 @@ export default {
this.isCollapse = true this.isCollapse = true
this.$refs[`entityRow${this.collapseIndex}`].collapse() this.$refs[`entityRow${this.collapseIndex}`].collapse()
} }
},
watch: {
listData: {
deep: true,
handler (n) {
if (!n || n.length === 0) {
this.timeout = setTimeout(() => {
this.noData = true
}, 500)
} else {
clearTimeout(this.timeout)
this.noData = false
}
}
}
} }
} }
</script> </script>