ソースを参照

feat: 修改表格样式,添加长Url的Tooltip

Jinyao 5 年 前
コミット
a336ee5404
2 ファイル変更9 行追加2 行削除
  1. 2 0
      src/element-plus.ts
  2. 7 2
      src/views/Project/Pipeline.vue

+ 2 - 0
src/element-plus.ts

@@ -16,6 +16,7 @@ import {
   ElIcon,
   ElInput,
   ElSubmenu,
+  ElTooltip,
   ElMenuItem,
   ElForm,
   ElFormItem,
@@ -65,6 +66,7 @@ export const Components = [
   ElSelect,
   ElOption,
   ElSubmenu,
+  ElTooltip,
   ElTabs,
   ElTabPane,
 ];

+ 7 - 2
src/views/Project/Pipeline.vue

@@ -240,16 +240,18 @@
           prop="name"
           label="名称"
           align="center"
+          width="100"
         ></ElTableColumn>
         <ElTableColumn
           prop="pipelineId"
           label="流水线ID"
           align="center"
-          width="100"
+          width="60"
         ></ElTableColumn>
         <ElTableColumn
           label="部署时间"
           align="center"
+          width="320"
           :formatter="(row) => timeFormatter(row, 'deployedTime')"
         ></ElTableColumn>
         <ElTableColumn
@@ -257,14 +259,17 @@
           align="center"
         >
           <template #default="scope">
+            <ElTooltip effect="dark" :content="scope.row.accessUrl" placement="top-start">
               <ElButton type="text" @click="open(scope.row.accessUrl, '_blank')">
                 {{scope.row.accessUrl}}
               </ElButton>
+            </ElTooltip>
           </template>
         </ElTableColumn>
         <ElTableColumn
           label="运行状态"
           align="center"
+          width="100"
         >
           <template #default="scope">
             <template v-if="scope.row.status === '正常'">
@@ -275,7 +280,7 @@
             </template>
           </template>
         </ElTableColumn>
-        <ElTableColumn>
+        <ElTableColumn width="60">
           <template #default="scope">
             <ElButton type="text" @click="deleteProduction(scope.row.id)">
               <i class="el-icon-delete"></i>