From 328d92910360636b17a919d1d6a835098c0485cc Mon Sep 17 00:00:00 2001
From: wujingjing <gersonwu@qq.com>
Date: 星期日, 29 九月 2024 15:39:12 +0800
Subject: [PATCH] 优化样式
---
src/components/chat/chatComponents/summaryCom/components/recordSetTable/RecordSetTable.vue | 56 ++++++++++++++++++++++++++++++++++++++++++++++++++------
1 files changed, 50 insertions(+), 6 deletions(-)
diff --git a/src/components/chat/chatComponents/summaryCom/components/recordSetTable/RecordSetTable.vue b/src/components/chat/chatComponents/summaryCom/components/recordSetTable/RecordSetTable.vue
index 8971a45..2cccabb 100644
--- a/src/components/chat/chatComponents/summaryCom/components/recordSetTable/RecordSetTable.vue
+++ b/src/components/chat/chatComponents/summaryCom/components/recordSetTable/RecordSetTable.vue
@@ -6,11 +6,11 @@
<el-table
ref="tableRef"
border
- :cell-style="{ textAlign: 'center' }"
- :header-cell-style="{ textAlign: 'center' }"
+ :cell-style="tableCellStyle"
+ :header-cell-style="tableHeaderCellStyle"
:data="data?.values"
:spanMethod="objectSpanMethod"
- highlight-current-row
+
class="w-full h-full"
cellClassName="text-sm"
headerCellClassName="text-sm"
@@ -34,9 +34,9 @@
<script setup lang="ts">
import type { TableInstance } from 'element-plus';
import _ from 'lodash';
-import { onMounted, ref, type PropType } from 'vue';
+import { CSSProperties, onMounted, ref, type PropType } from 'vue';
+import { BORDER_COLOR, COL_HEADER_CELL_BG_COLOR, THICK_BORDER_WIDTH } from '../deviceLastValue/constants';
import { debounce, getTextWidth } from '/@/utils/util';
-
const props = defineProps({
data: {
type: Object as PropType<any>,
@@ -163,6 +163,45 @@
};
const resizeHandler = debounce(resizeEvent);
+//#region ====================== 鏍峰紡 ======================
+const tableCellStyle = ({ row, rowIndex, column, columnIndex }): CSSProperties => {
+ const extraStyle =
+ columnIndex === 0
+ ? {
+ borderLeft: `${THICK_BORDER_WIDTH}px solid ${BORDER_COLOR}`,
+ }
+ : {};
+ if (columnIndex === 0) {
+ }
+ return {
+ textAlign: 'center',
+ borderColor: BORDER_COLOR,
+ borderWidth: `${THICK_BORDER_WIDTH}px`,
+ color: '#7331a5',
+ fontSize: '0.875rem',
+ ...extraStyle,
+ };
+};
+
+const tableHeaderCellStyle = ({ row, rowIndex, column, columnIndex }): CSSProperties => {
+ const extraStyle =
+ columnIndex === 0
+ ? {
+ borderLeft: `${THICK_BORDER_WIDTH}px solid ${BORDER_COLOR}`,
+ }
+ : {};
+
+ return {
+ textAlign: 'center',
+ borderColor: BORDER_COLOR,
+ borderWidth: `${THICK_BORDER_WIDTH}px`,
+ backgroundColor: COL_HEADER_CELL_BG_COLOR,
+ fontWeight: 700,
+ fontSize: '0.875rem',
+ color: '#000',
+ ...extraStyle,
+ };
+}; //#endregion
onMounted(() => {
resizeEvent({
@@ -171,4 +210,9 @@
});
});
</script>
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+
+// :deep(.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell){
+// background-color: v-bind(stripedBgColor);
+// }
+</style>
--
Gitblit v1.9.3