From 33f9d4fa4cef685ad21d4fe67ee40907ec76d7a3 Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期三, 08 四月 2026 13:04:28 +0800
Subject: [PATCH] 1.样式修改
---
src/components/PIMTable/PIMTable.vue | 32 +++++++++++++++++++++++++-------
1 files changed, 25 insertions(+), 7 deletions(-)
diff --git a/src/components/PIMTable/PIMTable.vue b/src/components/PIMTable/PIMTable.vue
index 1a2ef5d..55f0827 100644
--- a/src/components/PIMTable/PIMTable.vue
+++ b/src/components/PIMTable/PIMTable.vue
@@ -4,7 +4,7 @@
v-loading="tableLoading"
:border="border"
:data="tableData"
- :header-cell-style="{ background: '#F0F1F5', color: '#333333' }"
+ :header-cell-style="mergedHeaderCellStyle"
:height="height"
:highlight-current-row="highlightCurrentRow"
:row-class-name="rowClassName"
@@ -47,7 +47,7 @@
:width="item.width"
>
<template #header="scope">
- <div class="pim-table-header-cell">
+ <div class="pim-table-header-cell" :class="{ 'has-extra': item.headerSlot }">
<div class="pim-table-header-title">
{{ item.label }}
</div>
@@ -189,7 +189,6 @@
:disabled="isOperationDisabled(o, scope.row)"
:style="{
color: getOperationColor(o, scope.row),
- fontWeight: 'bold',
}"
>{{ o.name }}</el-button
>
@@ -227,7 +226,7 @@
<script setup>
import pagination from "./Pagination.vue";
-import { ref, inject, getCurrentInstance } from "vue";
+import { computed, ref, inject, getCurrentInstance } from "vue";
import { ElMessage } from "element-plus";
// 鑾峰彇鍏ㄥ眬鐨� uploadHeader
@@ -335,6 +334,13 @@
},
});
+const mergedHeaderCellStyle = computed(() => ({
+ background: "var(--surface-soft)",
+ color: "var(--text-secondary)",
+ fontWeight: 600,
+ ...props.headerCellStyle,
+}));
+
// Data
const uploadRefs = ref([]);
const currentFiles = ref({});
@@ -368,11 +374,11 @@
return format(val);
} else return val;
};
+const validTagTypes = ["primary", "success", "info", "warning", "danger"];
const formatType = (val, format) => {
- if (typeof format === "function") {
- return format(val);
- } else return "";
+ const type = typeof format === "function" ? format(val) : undefined;
+ return validTagTypes.includes(type) ? type : undefined;
};
const isOperationDisabled = (operation, row) => {
@@ -430,6 +436,8 @@
const baseColor =
operation?.name === "鍒犻櫎" || operation?.name === "delete"
? "#D93025"
+ : operation?.name === "璇︽儏"
+ ? "#67C23A"
: operation?.color || "var(--el-color-primary)";
if (isOperationDisabled(operation, row)) {
@@ -506,6 +514,12 @@
</script>
<style scoped lang="scss">
+.lims-table {
+ border: 1px solid var(--surface-border);
+ border-radius: 18px;
+ background: rgba(255, 255, 255, 0.9);
+}
+
.cell {
white-space: nowrap;
overflow: hidden;
@@ -518,4 +532,8 @@
.pim-table-header-extra :deep(.el-select) {
width: 100%;
}
+
+.pim-table-header-title {
+ font-weight: 600;
+}
</style>
--
Gitblit v1.9.3