fix: 卡片式列表高度调整,增加no-data提示
This commit is contained in:
@@ -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;
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user