overflow-text 添加split 通过空格等符号分隔换行

src/components/overflow-text/index.vue

@@ -6,9 +6,9 @@
     :open-delay="300"
   >
     <template #content>
-      <span class="tooltip-content">{{text}}</span>
+      <span class="tooltip-content" :class="{split}">{{text}}</span>
     </template>
-    <div class="overflow-text" :style="{width}">
+    <div class="overflow-text" :class="{split}" :style="{width}">
       {{text}}
       </div>
   </el-tooltip>
@@ -24,6 +24,10 @@ export default {
     width: {
       type: String,
       default: '200px'
+    },
+    split: {
+      type: Boolean,
+      default: false
     }
   }
 }
@@ -40,4 +44,7 @@ export default {
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
   }
+  .split {
+    word-break: keep-all;
+  }
 </style>

src/views/settlementManager/settlementList.vue

@@ -144,12 +144,14 @@
               <div>{{ scope.row.settlementDate | formatTimer }}</div>
             </template>
           </el-table-column>
-          <el-table-column
-            align="center"
+          <el-table-column align="center"
             prop="memo"
-            width="500"
-            label="备注"
-          ></el-table-column>
+            width="200"
+            label="备注">
+            <template slot-scope="scope">
+              <overflow-text split :text="scope.row.memo" width="100%"></overflow-text>
+            </template>
+          </el-table-column>
         </el-table>
         <pagination
           sync