Ver código fonte

style: Report Template Management页面表格action栏 按钮加上tooltip展示

Jack Zhou 4 semanas atrás
pai
commit
60a5c29206

+ 53 - 39
src/views/TemplateManagement/src/components/TableView/src/TableView.vue

@@ -312,45 +312,59 @@ defineExpose({
     >
       <!-- action操作栏的插槽 -->
       <template #action="{ row }">
-        <el-button class="el-button--blue action-btn" @click="handleEdit(row.serial_no)">
-          <span
-            style="margin-right: 2px; font-size: 15px"
-            class="font_family icon-icon_edit_b"
-          ></span>
-        </el-button>
-        <el-button class="el-button--blue action-btn" @click="handleCopy(row.serial_no)">
-          <span
-            style="margin-right: 2px; font-size: 15px"
-            class="font_family icon-icon_clone_b"
-          ></span>
-        </el-button>
-        <el-button
-          class="el-button--blue action-btn"
-          v-if="row.is_active === 't'"
-          @click="handleClick(row, false)"
-        >
-          <span
-            style="margin-right: 2px; font-size: 16px"
-            class="font_family icon-icon_disablee__b"
-          ></span>
-        </el-button>
-        <el-button
-          class="el-button--blue action-btn"
-          v-if="row.is_active === 'f'"
-          @click="handleClick(row, true)"
-        >
-          <span
-            style="margin-right: 2px; font-size: 13px"
-            class="font_family icon-icon_active"
-          ></span>
-        </el-button>
-        <el-button
-          v-if="isShowDeleteBtn"
-          class="el-button--blue action-btn"
-          @click="handleDelete(row.serial_no)"
-        >
-          <span class="font_family icon-icon_delete_b"></span>
-        </el-button>
+        <el-tooltip effect="dark" content="Edit" placement="top">
+          <el-button class="el-button--blue action-btn" @click="handleEdit(row.serial_no)">
+            <span
+              style="margin-right: 2px; font-size: 15px"
+              class="font_family icon-icon_edit_b"
+            ></span>
+          </el-button>
+        </el-tooltip>
+
+        <el-tooltip effect="dark" content="Copy" placement="top">
+          <el-button class="el-button--blue action-btn" @click="handleCopy(row.serial_no)">
+            <span
+              style="margin-right: 2px; font-size: 15px"
+              class="font_family icon-icon_clone_b"
+            ></span>
+          </el-button>
+        </el-tooltip>
+
+        <el-tooltip effect="dark" content="Inactivate" placement="top">
+          <el-button
+            class="el-button--blue action-btn"
+            v-if="row.is_active === 't'"
+            @click="handleClick(row, false)"
+          >
+            <span
+              style="margin-right: 2px; font-size: 16px"
+              class="font_family icon-icon_disablee__b"
+            ></span>
+          </el-button>
+        </el-tooltip>
+
+        <el-tooltip effect="dark" content="Activate" placement="top">
+          <el-button
+            class="el-button--blue action-btn"
+            v-if="row.is_active === 'f'"
+            @click="handleClick(row, true)"
+          >
+            <span
+              style="margin-right: 2px; font-size: 13px"
+              class="font_family icon-icon_active"
+            ></span>
+          </el-button>
+        </el-tooltip>
+
+        <el-tooltip effect="dark" content="Delete" placement="top">
+          <el-button
+            v-if="isShowDeleteBtn"
+            class="el-button--blue action-btn"
+            @click="handleDelete(row.serial_no)"
+          >
+            <span class="font_family icon-icon_delete_b"></span>
+          </el-button>
+        </el-tooltip>
       </template>
       <!-- Status字段的插槽 -->
       <template #status="{ row, column }">