显示格式调整

src/views/report/reportProject.vue

@@ -184,18 +184,23 @@ getListByNameFun();
               <el-select  remote  :remote-method="inputGetList" filterable placeholder="请输入项目名称" v-model="reportId" clearable>
                 <template #header>
                   <el-row :gutter="20">
-                    <el-col :span="6">项目名称</el-col>
+                    <el-col :span="8">
-                    <el-col :span="6">项目类别</el-col>
+                      <span class="truncate-text" title="项目名称">项目名称</span>
-                    <el-col :span="6">审计单位名称</el-col>
+                    </el-col>
+                    <el-col :span="4">项目类别</el-col>
+                    <el-col :span="6">
+                      <span class="truncate-text" title="审计单位名称">审计单位</span>
+                    </el-col>
                     <el-col :span="6">项目单位</el-col>
                   </el-row>
                 </template>
+
                 <el-option v-for="item in projectList" :value="item.id" :label="item.reportName">
                   <el-row :gutter="20">
-                    <el-col :span="6">{{item.reportName}}</el-col>
+                    <el-col :span="8" class="truncate-cell" :title="item.reportName">{{item.reportName}}</el-col>
-                    <el-col :span="6">{{item.reportType}}</el-col>
+                    <el-col :span="4">{{item.reportType}}</el-col>
-                    <el-col :span="6">{{item.auditUnit}}</el-col>
+                    <el-col :span="6" class="truncate-cell" :title="item.auditUnit">{{item.auditUnit}}</el-col>
-                    <el-col :span="6">{{item.projectUnit}}</el-col>
+                    <el-col :span="6" class="truncate-cell" :title="item.projectUnit">{{item.projectUnit}}</el-col>
                   </el-row>
                 </el-option>
               </el-select>
@@ -309,4 +314,18 @@ getListByNameFun();
   color: 19257D;
 
 }
+
+.truncate-text {
+  display: inline-block;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.truncate-cell {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 </style>