props.title 显示修改方式

gerson

2024-09-29 6fa532014e8afd43650128ccd9f68b7460476825

 src/components/chat/chatComponents/summaryCom/components/recordSetTable/RecordSetTable.vue

@@ -1,30 +1,44 @@
<!-- 查询最新警告信息 -->
<template>
   <div>
      <span v-if="data?.title" class="text-base font-bold flex-center mb-5">{{ data?.title }}</span>
      <!-- <span v-if="data?.title" class="text-base font-bold flex-center mb-5">{{ data?.title }}</span> -->
      <div class="w-full" style="height: 70vh" ref="containerRef" v-resize="resizeHandler">
         <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"
         >
            <template v-if="data?.cols?.length > 0">
               <el-table-column
                  v-for="(item, index) in colList"
                  :label="item.title"
                  :width="item.width"
                  :sortable="item.type === 'time'"
                  :key="index"
                  :prop="index + ''"
                  show-overflow-tooltip
               />
            <el-table-column v-if="data?.title" :label="data?.title" show-overflow-tooltip>
               <template v-if="data?.cols?.length > 0">
                  <el-table-column
                     v-for="(item, index) in colList"
                     :label="item.title"
                     :width="item.width"
                     :sortable="item.type === 'time'"
                     :key="index"
                     :prop="index + ''"
                     show-overflow-tooltip
                  />
               </template>
            </el-table-column>
            <template v-else>
               <template v-if="data?.cols?.length > 0">
                  <el-table-column
                     v-for="(item, index) in colList"
                     :label="item.title"
                     :width="item.width"
                     :sortable="item.type === 'time'"
                     :key="index"
                     :prop="index + ''"
                     show-overflow-tooltip
                  />
               </template>
            </template>
         </el-table>
      </div>
@@ -34,9 +48,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 +177,39 @@
};

const resizeHandler = debounce(resizeEvent);
//#region ====================== 样式 ======================
const tableCellStyle = ({ 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`,
      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}` } : {}),
      ...(rowIndex === 0 ? { borderTop: `${THICK_BORDER_WIDTH}px solid ${BORDER_COLOR}`, backgroundColor: '#8db4e2' } : {}),
   };

   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 +218,8 @@
   });
});
</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>