فهرست منبع

refactor(system): 优化消息列表页面的标题和内容显示

- 为标题和内容列添加 tooltip,解决内容显示不完整的问题- 修改内容列的属性名,使其与接口返回的数据一致
- 添加样式设置,优化 tooltip 的显示效果
fugui001 5 ماه پیش
والد
کامیت
547d8f0ce2
1فایلهای تغییر یافته به همراه8 افزوده شده و 2 حذف شده
  1. 8 2
      src/views/system/business/messages/index.vue

+ 8 - 2
src/views/system/business/messages/index.vue

@@ -46,8 +46,8 @@
         <el-table-column type="selection" width="55" align="center" />
         <el-table-column label="ID" align="center" prop="id" v-if="true" />
         <el-table-column label="消息类型" align="center" prop="messageType" />
-        <el-table-column label="标题" align="center" prop="title" />
-        <el-table-column label="内容" align="center" prop="content" />
+        <el-table-column label="标题" align="center" prop="title" :show-overflow-tooltip="true" />
+        <el-table-column label="内容" align="center" prop="contentText" :show-overflow-tooltip="true" />
         <el-table-column label="发送时间" align="center" prop="sendTime" width="180">
           <template #default="scope">
             <span>{{ parseTime(scope.row.sendTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
@@ -250,3 +250,9 @@ onMounted(() => {
   getList();
 });
 </script>
+<style lang="scss" scoped>
+.el-tooltip__popper {
+  max-width: 300px; /* 设置悬浮提示的最大宽度 */
+  word-break: break-all; /* 允许长单词或URL地址换行 */
+}
+</style>