采购需求去掉横向滚动问题

ruoyi-ui/src/views/oa/oaWarehouseRequest/index.vue

@@ -96,14 +96,37 @@
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
-    <el-table v-loading="loading" :data="oaWarehouseRequestList" @selection-change="handleSelectionChange">
+    <el-table v-loading="loading" :data="oaWarehouseRequestList" style="width: 100%" @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="55" align="center"/>
-      <el-table-column label="物品名称" align="center" prop="itemName"/>
+      <el-table-column label="操作" align="center" width="140" class-name="small-padding fixed-width">
-      <el-table-column label="数量" align="center" prop="quantity"/>
+        <template slot-scope="scope">
-      <el-table-column label="项目" align="center" prop="projectName"/>
+          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">修改</el-button>
-      <el-table-column label="负责人" align="center" prop="owner"/>
+          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
-      <!-- 表格中的状态列（替换原有列） -->
+        </template>
-      <el-table-column label="状态" align="center" prop="status" width="160">
+      </el-table-column>
+      <el-table-column label="物品名称" align="center" prop="itemName" min-width="140">
+        <template slot-scope="{ row }">
+          <el-tooltip effect="dark" :content="row.itemName || ''" placement="top" :disabled="!row.itemName">
+            <div class="cell-2line">{{ row.itemName }}</div>
+          </el-tooltip>
+        </template>
+      </el-table-column>
+      <el-table-column label="数量" align="center" prop="quantity" width="80"/>
+      <el-table-column label="项目" align="center" prop="projectName" min-width="160">
+        <template slot-scope="{ row }">
+          <el-tooltip effect="dark" :content="row.projectName || ''" placement="top" :disabled="!row.projectName">
+            <div class="cell-2line">{{ row.projectName }}</div>
+          </el-tooltip>
+        </template>
+      </el-table-column>
+      <el-table-column label="负责人" align="center" prop="owner" min-width="100">
+        <template slot-scope="{ row }">
+          <el-tooltip effect="dark" :content="row.owner || ''" placement="top" :disabled="!row.owner">
+            <div class="cell-2line">{{ row.owner }}</div>
+          </el-tooltip>
+        </template>
+      </el-table-column>
+      <el-table-column label="状态" align="center" prop="status" width="140">
         <template slot-scope="{ row }">
           <el-select
             v-model="row.status"
@@ -121,31 +144,23 @@
           </el-select>
         </template>
       </el-table-column>
-      <el-table-column label="附件" align="center" prop="accessories" max-width="180">
+      <el-table-column label="附件" align="center" prop="accessories" width="120">
         <template slot-scope="{ row }">
           <file-preview v-model="row.accessories" :simple="true"/>
         </template>
       </el-table-column>
-      <el-table-column label="采购原因" align="center" prop="reason"/>
+      <el-table-column label="采购原因" align="center" prop="reason" min-width="160">
-
+        <template slot-scope="{ row }">
-
+          <el-tooltip effect="dark" :content="row.reason || ''" placement="top" :disabled="!row.reason">
-      <el-table-column label="备注" align="center" prop="remark"/>
+            <div class="cell-2line">{{ row.reason }}</div>
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+          </el-tooltip>
-        <template slot-scope="scope">
+        </template>
-          <el-button
+      </el-table-column>
-            size="mini"
+      <el-table-column label="备注" align="center" prop="remark" min-width="140">
-            type="text"
+        <template slot-scope="{ row }">
-            icon="el-icon-edit"
+          <el-tooltip effect="dark" :content="row.remark || ''" placement="top" :disabled="!row.remark">
-            @click="handleUpdate(scope.row)"
+            <div class="cell-2line">{{ row.remark }}</div>
-          >修改
+          </el-tooltip>
-          </el-button>
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-delete"
-            @click="handleDelete(scope.row)"
-          >删除
-          </el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -432,3 +447,17 @@ export default {
   }
 };
 </script>
+
+<style scoped>
+.cell-2line {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-break: break-all;
+  line-height: 1.4;
+  max-height: 2.8em;
+  white-space: normal;
+}
+</style>