Tooltip 文字提示

在偶然维护前端开发时，遇到页面列表中某个字段内容太长，且该字段使用了组件显示，导致不能使用纯文本得那个省略号代替显示得css样式效果，如下

所以只能另辟溪路了，

1、最开始想到是使用横向滚动得效果来实现，但是实现后，感觉还是不太理想，因为用户注意不到你这里有滚动，除非显示出滚动条，但是影响页面整体样式效果。

效果如下：主要是调整css样式来实现得

前端代码：

<el-table-column
        label="示范区域"
        align="center"
        prop="creationTime"
        :show-overflow-tooltip="true"
        width="120"
      >
        <template slot-scope="scope">
          <div class="tag tag-scroll-wrapper" style="display: flex; justify-content: center; align-items: center;">
            <el-tag
              v-for="(item, index) in scope.row.projectAreas"
              :key="index"
              size="small"
              type="success"
              class="tagItem"
            >{{ item.fullAreaName }}</el-tag>
            <!-- <el-tooltip class="item" effect="dark" :content="getJoin(scope.row.projectAreas)" placement="top">
              <el-tag
              v-if="scope.row.projectAreas.length>0"
              size="small"
              type="success"
              class="tagItem">
                {{ scope.row.projectAreas[0].fullAreaName+"..." }} 
              </el-tag>   
            </el-tooltip>  -->
          </div>
        </template>
      </el-table-column>

对calss="tag-scroll-wrapper"得div增加如下css样式

.tag-scroll-wrapper {  
  display: flex;  
  flex-wrap: nowrap;  
  overflow-x: auto; /* 水平滚动 */  
  -ms-overflow-style: none; /* IE 和 Edge 滚动条样式 */  
  scrollbar-width: auto; /* Firefox 滚动条样式 */  
}  

2、最后想到借助Tooltip组件来实现之前纯文本根据css样式实现得那种省略号效果得思路，效果如下：

前端代码：

<el-table-column
        label="领域标签"
        align="center"
        prop="domainLabel"
        :show-overflow-tooltip="true"
        width="180"
      >
        <template slot-scope="scope">
          <div class="tag" style="display: flex; justify-content: center; align-items: center;">
            <!-- <el-tag
              v-for="(item, index) in scope.row.domainLabel"
              :key="index"
              size="small"
              class="tagItem"
            >{{ item }}</el-tag> -->
            <el-tooltip class="item" effect="dark" :content="getLabelJoin(scope.row.domainLabel)" placement="top">
              <el-tag v-if="scope.row.domainLabel.length>0" size="small" class="tagItem">
                {{ scope.row.domainLabel[0]+"..." }}
              </el-tag>
            </el-tooltip>
            <!-- <el-tooltip class="item" effect="dark" placement="top">
              <div slot="content" class="text_warp">
                {{getLabelJoin(scope.row.domainLabel)}}
              </div>
              <el-tag v-if="scope.row.domainLabel.length>0" size="small" class="tagItem">
                {{ scope.row.domainLabel[0]+"..." }}
              </el-tag>
            </el-tooltip> -->
          </div>
        </template>
      </el-table-column>

js代码，主要处理需要展示得提示框中得内容,map是循环数组，然后使用join()方法拼接成字符串

   getJoin(listData){
      if(listData.length>0){
        return listData.map(item=>item.fullAreaName).join('、');
      }
    },
    getLabelJoin(listData){
      console.log("123",listData);
      return listData.join('、');
      // if(listData.length>0){
      //   return listData.sort((a,b)=>{
      //     return a.length-b.length;
      //   }).join('、');
      // }
    },

其中上图中提示框中得效果也是修改过得，最开始不会换行，超过电脑屏幕也不会换行，影响展示效果，需关闭el-tooltip的content属性，添加插槽，插槽内容为Tooltip 文字提示组件，代码如下

<el-table-column
        label="领域标签"
        align="center"
        prop="domainLabel"
        :show-overflow-tooltip="true"
        width="180"
      >
        <template slot-scope="scope">
          <div class="tag" style="display: flex; justify-content: center; align-items: center;">
            <!-- <el-tag
              v-for="(item, index) in scope.row.domainLabel"
              :key="index"
              size="small"
              class="tagItem"
            >{{ item }}</el-tag> -->
            <!-- <el-tooltip class="item" effect="dark" :content="getLabelJoin(scope.row.domainLabel)" placement="top">
              <el-tag v-if="scope.row.domainLabel.length>0" size="small" class="tagItem">
                {{ scope.row.domainLabel[0]+"..." }}
              </el-tag>
            </el-tooltip> -->
            <!--以下去掉了上面注释得el-tooltip中得:content属性-->
            <el-tooltip class="item" effect="dark" placement="top">
              <!--启用插槽slot="content"-->
              <div slot="content" class="text_warp">
                {{getLabelJoin(scope.row.domainLabel)}}
              </div>
              <el-tag v-if="scope.row.domainLabel.length>0" size="small" class="tagItem">
                {{ scope.row.domainLabel[0]+"..." }}
              </el-tag>
            </el-tooltip>
          </div>
        </template>
      </el-table-column>

至此就实现了这种效果。