提交

src/views/biz/orderItem/index.vue

@@ -66,7 +66,10 @@
         @update:checked-row-keys="handleCheck"
         :pagination="pagination"
          -->
+        <!--flex-height-->
       <n-data-table
+        ref="tableRef"
+        id="my-table"
         size="small"
         remote
          striped
@@ -75,6 +78,10 @@
         :columns="columns"
         :data="tableData"
         :loading="loading"
+        virtual-scroll
+        :virtual-scroll-x="true"
+        :scroll-x="scrollX"
+        :max-height="580"
       />
       <div class="pagination-container" style="display: flex; justify-content: flex-end; margin-top: 12px">
         <n-pagination
@@ -134,7 +141,6 @@
                   clearable
                   remote
                   :clear-filter-after-select="false"
-                  
                   @update:value="xmselupdate"
                 />
             </n-form-item>
@@ -487,13 +493,16 @@ const columns = [
   // },
   { 
     align:'center',
-    minWidth: 150,
+    minWidth: 260,
     title: '产品名称', 
-    key: 'projectName' 
+    key: 'projectName',
+    ellipsis: {
+      tooltip: true
+    } 
   },
   {
     align:'center',
-    minWidth: 150, 
+    minWidth: 200, 
     title: '物料名称', 
     key: 'name' 
   },
@@ -583,9 +592,9 @@ const columns = [
   },
   { 
     align:'center',
-    minWidth: 150,
     title: '备注', 
-    key: 'remark' 
+    key: 'remark', 
+    minWidth:200
   },
   // { title: '创建时间', key: 'createTime', width: 100 },
   // { title: '创建人', key: 'createBy' },
@@ -634,6 +643,19 @@ const columns = [
   }
 ]
 
+//根据内容设置表格滚动条
+let scrollX = ref(0)
+
+function updateScrollX() {
+  const tableElement = document.querySelector('#my-table .n-data-table-table')
+  if (tableElement) {
+    // 使用 scrollWidth 可以获取表格内容的总宽度，确保滚动条出现
+    scrollX.value = tableElement.scrollWidth
+  } else {
+    scrollX.value = 2000;
+  }
+};
+
 // 加载数据
 async function loadData() {
   loading.value = true
@@ -1058,7 +1080,11 @@ async function loadDictOptions() {
 onMounted(() => {
   loadData()
   loadDictOptions()
+
+  updateScrollX()
+  window.addEventListener('resize', updateScrollX)
 })
+
 </script>
 
 <style scoped>