update: 客户展示设置

src/views/apps/customerApp/memberShowSet.vue

@@ -18,8 +18,14 @@
       </el-table-column>
       <el-table-column label="策略类型" prop="storeType" :formatter="(row, col, val) => (val == '-999' ? '通用策略' : '特殊策略')" min-width="110px"></el-table-column>
       <el-table-column label="门店类型" prop="storeType" :formatter="formatStoreType" min-width="110px"></el-table-column>
-      <el-table-column label="设置内容" min-width="310px" show-overflow-tooltip>
-        <template slot-scope="{ row }">{{ formatSetting(row) }}</template>
+      <el-table-column label="设置内容" min-width="310px">
+        <template slot-scope="{ row, $index }">
+          <div class="text-overflow" :ref="'setContent' + $index" v-if="!row.isOverflow">{{ formatSetting(row) }}</div>
+          <el-tooltip placement="top" v-else>
+            <div slot="content">{{ formatSetting(row) }}</div>
+            <div class="text-overflow">{{ formatSetting(row) }}</div>
+          </el-tooltip>
+        </template>
       </el-table-column>
       <el-table-column label="创建人" prop="creatorName" min-width="120px" show-overflow-tooltip></el-table-column>
       <el-table-column label="编辑人" prop="modifierName" min-width="120px" show-overflow-tooltip></el-table-column>
@@ -101,6 +107,12 @@ export default {
           return;
         }
         this.tableData = Array.isArray(result) ? result : [];
+        this.$nextTick(() => {
+          this.tableData.map((el, index) => {
+            const target = this.$refs['setContent' + index];
+            this.$set(el, 'isOverflow', target.scrollHeight > target.clientHeight);
+          });
+        });
       });
     },
     onDel(row) {
@@ -123,6 +135,14 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.text-overflow {
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
 .show-set {
   padding: 20px;
   .show-set-header {