Merge branch 'feature/3月迭代' into dev

src/views/enterprise/salutatory.vue

@@ -25,11 +25,15 @@
           <el-button type="primary" @click="changeRoute">新建欢迎语</el-button>
         </div>
         <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" :style="{ width: '100%' }" v-loading="loading">
-          <el-table-column prop="title" label="标题" width="200" show-overflow-tooltip>
-            <template slot-scope="{ row }">
-              {{ row.title }}
+          <el-table-column prop="title" label="标题" width="200">
+            <div ref="title" slot-scope="{ row }">
+              <!-- 算出文本的长度，再设置 -->
+              <el-tooltip placement="top" :content="row.title" v-if="row.isOverflow">
+                <span class="title-text">{{ row.title }}</span>
+              </el-tooltip>
+              <span v-else>{{ row.title }}</span>
               <el-tag size="mini" v-if="row.defaultWelcomeFlag == 1">默认欢迎语</el-tag>
-            </template>
+            </div>
           </el-table-column>
           <el-table-column prop="welcomeContent" label="内容" show-overflow-tooltip min-width="200">
             <template slot-scope="{ row }">{{ row.welcomeContent }}</template>
@@ -235,6 +239,20 @@ export default {
                 });
               }
             });
+            this.$nextTick(() => {
+              const span = document.createElement('span');
+              span.style.position = 'fixed';
+              span.style.opacity = 0;
+              span.style.visibility = 'hidden';
+              const maxWidth = this.$refs.title.offsetWidth - 85;
+              this.tableData.map(el => {
+                span.innerHTML = el.title;
+                document.body.appendChild(span);
+                el.isOverflow = span.offsetWidth > maxWidth;
+                return el;
+              });
+              document.body.removeChild(span);
+            });
           }
         })
         .catch(error => {
@@ -254,6 +272,14 @@ export default {
 };
 </script>
 <style type="text/scss" lang="scss" scoped>
+.title-text {
+  display: inline-block;
+  vertical-align: middle;
+  max-width: calc(100% - 85px);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 .warp {
   background: #fff;
   margin-bottom: 10px;