浏览代码

feat(system): 为商业资讯列表添加封面图片并优化展示效果- 在表格中添加封面图片列,显示新闻的封面图像
- 为引言和正文内容列添加显示溢出文本工具提示- 调整部分列的宽度以适应内容展示

fugui001 3 月之前
父节点
当前提交
8a8046fb60
共有 1 个文件被更改,包括 15 次插入2 次删除
  1. 15 2
      src/views/system/business/info/index.vue

+ 15 - 2
src/views/system/business/info/index.vue

@@ -47,11 +47,24 @@
       </template>
 
       <el-table v-loading="loading" border :data="infoList" @selection-change="handleSelectionChange">
-<!--        <el-table-column type="selection" width="55" align="center" />-->
+        <!--        <el-table-column type="selection" width="55" align="center" />-->
         <el-table-column label="" align="center" prop="id" v-if="false" />
         <el-table-column label="类型" align="center" prop="categoryName" />
         <el-table-column label="新闻标题" align="center" prop="title" />
-        <el-table-column label="引言" align="center" prop="summary" />
+        <el-table-column label="引言" align="center" prop="summary" :show-overflow-tooltip="true" />
+        <el-table-column label="封面" align="center" width="90">
+          <template #default="scope">
+            <el-image
+              v-if="scope.row.imageUrl"
+              :src="scope.row.imageUrl"
+              style="width: 40px; height: 40px; border-radius: 4px; cursor: zoom-in"
+              :preview-src-list="[scope.row.imageUrl]"
+              :preview-teleported="true"
+              fit="cover"
+            />
+            <span v-else></span>
+          </template>
+        </el-table-column>
         <el-table-column label="正文内容" align="center" prop="contentText" :show-overflow-tooltip="true" />
         <el-table-column label="位置编码" align="center" prop="positionText" />
         <el-table-column label="时间" align="center" prop="createdAt" width="180">