优化样式

wujingjing

2024-09-29 328d92910360636b17a919d1d6a835098c0485cc

优化样式

 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>