props.title 显示修改方式

gerson

2024-09-29 6fa532014e8afd43650128ccd9f68b7460476825

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

@@ -1,7 +1,7 @@
<!-- 查询最新警告信息 -->
<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"
@@ -10,21 +10,35 @@
            :header-cell-style="tableHeaderCellStyle"
            :data="data?.values"
            :spanMethod="objectSpanMethod"

            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>
@@ -165,14 +179,10 @@
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) {
   }
   const extraStyle = {
      ...(columnIndex === 0 ? { borderLeft: `${THICK_BORDER_WIDTH}px solid ${BORDER_COLOR}` } : {}),
   };

   return {
      textAlign: 'center',
      borderColor: BORDER_COLOR,
@@ -184,12 +194,10 @@
};

const tableHeaderCellStyle = ({ row, rowIndex, column, columnIndex }): CSSProperties => {
   const extraStyle =
      columnIndex === 0
         ? {
               borderLeft: `${THICK_BORDER_WIDTH}px solid ${BORDER_COLOR}`,
           }
         : {};
   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',
@@ -211,7 +219,6 @@
});
</script>
<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);
// }