表格样式调整 pc自适应列

src/components/sheet.vue

@@ -1,18 +1,31 @@
 <script setup lang='ts'>
-import { PropType } from 'vue';
-
+import { PropType,computed } from 'vue';
+import { isMobile } from '@/utils/utils'
+ 
 const props = defineProps({
   data: {
     type: Array as PropType<any[]>,
     required: true
+  },
+  config: {
+    type: Object
   }
 })
 
+//手机端pc端又要不同样式
+const dynamicSty = computed(()=>{
+  return isMobile() ? 'mobile-sty' : 'pc-sty';
+})
+
 </script>
 
 <template>
-<div class="table-wrapper">
-  <table cellpadding="0" cellspacing="0">
+<div :class="['table-wrapper',dynamicSty ]">
+  <table 
+    cellpadding="0" 
+    cellspacing="0" 
+    :style="`font-size: ${props.config.FontSize||9}px`"
+  >
     <tbody>
       <tr 
         v-for="(item,index) in props.data"
@@ -78,19 +91,18 @@ const props = defineProps({
   max-width: calc(100vw - 20px);
   margin: 0 auto;
   // margin-right: -5px;
-  overflow: hidden;
-  // overflow-x: auto;
+  overflow: auto;
 }
 table {
   width: 100%;
   font-size: 14px;
   color: #666;
-  table-layout: fixed;
   td,
   th {
     // min-width: 120px;
     word-break: break-all;
     word-wrap: break-word;
+    line-height: 1.2em;
     border: 1px solid #dcdfe6;
     // height: 40px;
     text-align: center;
@@ -125,4 +137,19 @@ table {
     span { display: inline; }
   }
 }
+
+.pc-sty table {
+  table-layout: fixed;
+  td,th {
+    height: auto;
+  }
+}
+
+.mobile-sty table {
+  table-layout: auto;
+  td,th {
+    min-width: 120px;
+    height: 40px;
+  }
+}
 </style>

src/request/api.ts

@@ -58,6 +58,7 @@ export const ChartApi = {
 /* 表格模块 */
 interface IExcelParams {
 	UniqueCode: string | any
+	FromScene: number
 }
 export const SheetApi = {
 	/**

src/utils/utils.ts

@@ -75,4 +75,16 @@ export const getTerminal = () => {
   } else if (Terminal.platform.iPhone || Terminal.platform.iPad) {
     return 'ios';
   }
+}
+
+//判断是否是手机设备
+export function isMobile() {
+		// 判断是否是移动设备的正则表达式
+		const mobileRegex = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i;
+	
+		// 获取用户代理信息
+		const userAgent = navigator.userAgent;
+	
+		// 使用正则表达式检查用户代理信息
+		return mobileRegex.test(userAgent);
 }

src/views/sheetShow/index.vue

@@ -8,6 +8,8 @@ import { IUnknowObject } from '@/types';
 const route = useRoute();
 const code = ref(route.query.code || '')
 
+// route.query.fromScene 1智能研报 2研报列表 3英文研报
+
 interface InfoType extends IUnknowObject {
   ExcelName: string;
   TableInfo: any;
@@ -19,7 +21,7 @@ const info = ref<InfoType|any>({});
 const loading = ref(false);
 const getInfo = async() => {
   loading.value = true;
-  const { Data,Ret } = await SheetApi.getInfo({  UniqueCode: code.value});
+  const { Data,Ret } = await SheetApi.getInfo({  UniqueCode: code.value, FromScene: Number(route.query.fromScene||'') });
   
   loading.value = false;
   if(Ret !== 200) return
@@ -55,7 +57,7 @@ getInfo()
   >
     <h3 class="title">{{info.ExcelName}}</h3>
     
-    <sheet :data="info.TableInfo.TableDataList"/>
+    <sheet :data="info.TableInfo.TableDataList" :config="info.Config"/>
   </div>
 </template>