tableCellStyle

wujingjing

2024-09-29 16ad2958d8273823ccf1a14dd386c92405b78929

 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>