Browse Source

Merge remote-tracking branch 'origin/master'

pull/105/head
pengda 4 weeks ago
parent
commit
c27b7c0eb0
  1. 50
      src/components/GuipTable.vue
  2. 2
      src/style/theme/common.scss
  3. 1
      src/views/agent/siteList.vue

50
src/components/GuipTable.vue

@ -1,6 +1,8 @@
<template> <template>
<div class="table-container">
<el-table ref="guiptable" v-bind="$attrs" :data="tableData" v-on="$listeners" :border="border" @selection-change="handleSelectionChange" <el-table ref="guiptable" v-bind="$attrs" :data="tableData" v-on="$listeners" :border="border" @selection-change="handleSelectionChange"
:style="{ width: width ? width : '100%', height: height ? height : '100%' }" v-loading="loading"> :style="{ width: width ? width : '100%', height: height ? height : '100%' }" v-loading="loading" empty-text=" ">
<!-- 多选 --> <!-- 多选 -->
<template v-if="multiple"> <template v-if="multiple">
<el-table-column type="selection" width="55"> <el-table-column type="selection" width="55">
@ -36,10 +38,13 @@
</el-table-column> </el-table-column>
</template> </template>
<template #empty>
<el-empty :image="emptyImg"></el-empty>
</template>
</el-table> </el-table>
<div v-if="tableData.length === 0" class="custom-empty">
<img :src="emptyImg" alt="无数据" />
<p>暂无数据</p>
</div>
</div>
</template> </template>
<script> <script>
@ -82,12 +87,41 @@ export default {
} }
} }
</script> </script>
<style scoped> <style scoped lang="scss">
/* 外层容器需设为 relative,以便空状态定位 */
.table-container {
position: relative;
width: 100%;
}
/* 空状态固定定位(不随滚动移动) */
.custom-empty { .custom-empty {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -35%);
width: 200px;
text-align: center; text-align: center;
display: flex; background-color: #fff; /* 避免透明背景被表格线干扰 */
flex-direction: column; // padding: 20px;
align-items: center; z-index: 10; /* 确保显示在表格上方 */
img{
width: 80px;
height: 80px;
}
p{
font-size: 12px;
font-weight: normal;
line-height: 13px;
letter-spacing: 0.08em;
color: #626573;
}
}
/* 确保表格有最小高度(避免高度塌陷) */
.el-table ::v-deep .el-table__body-wrapper {
min-height: 150px !important;
} }
.empty-image { .empty-image {

2
src/style/theme/common.scss

@ -956,7 +956,7 @@ body {
// table start // table start
.el-table { .el-table {
min-height: 218px; min-height: 200px;
th, th,
td { td {

1
src/views/agent/siteList.vue

@ -185,6 +185,7 @@ export default {
that.siteList = response.data.sitelist that.siteList = response.data.sitelist
}) })
}).catch(error => { }).catch(error => {
this.tableLoading = false
console.error(error, 'error') console.error(error, 'error')
}) })
}, },

Loading…
Cancel
Save