留言图片显示、分页显示修改

GuLiMmo

2023-12-19 d772131fb8d75e2d57db59e6bd23ec469c7f9457

 src/views/leave/leaveWords.vue

@@ -12,9 +12,10 @@
        </el-button>
      </template>
      <template #imageUrls="{ row }">
        <div v-if="row.imageUrls.length > 0 || !!row.imageUrls">
        <div v-if="row.imageUrls.length > 0 || !!row.imageUrls" class="image-box">
          <el-image style="width: 70px;height: 70px;" :src="row.imageUrls[1]" :zoom-rate="1.2" :max-scale="7"
            :min-scale="0.2" :preview-src-list="row.imageUrls" :initial-index="4" fit="cover"></el-image>
            :min-scale="0.2" :infinite="false" :preview-src-list="row.imageUrls" :initial-index="4" fit="cover"></el-image>
          <div class="image-num">+{{ row.imageUrls.length }}</div>
        </div>
        <div v-else>暂无图片</div>
      </template>
@@ -198,16 +199,45 @@
      };

      getList(page.currentPage, page.pageSize, values).then(res => {
        this.data = res.data.data;
        const data = res.data.data;
        data.records.forEach(item => { !!item.imageUrls && (item.imageUrls = item.imageUrls.split(',')) })
        this.data = data.records;
        this.page.total = data.total;
        this.loading = false;
        getTree().then(res => {
          const column = this.findObject(this.option.column, "parentId");
          column.dicData = res.data.data;
        });
        // getTree().then(res => {
        //   const column = this.findObject(this.option.column, "parentId");
        //   column.dicData = res.data.data;
        // });
      });
    }
  }
};
</script>

<style></style>
<style lang="scss" scoped>
:deep() {
  .el-table__cell {
    position: static !important; // 解决el-image 和 el-table冲突层级冲突问题
  }
}

.image-box {
  width: 70px;
  height: 70px;
  position: relative;

  .image-num {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba($color: #000000, $alpha: .4);
    pointer-events: none;
    color: #fff;
    text-align: center;
    line-height: 70px;
    font-size: 20px;
  }
}
</style>