vue3中实现内容溢出隐藏以及显示提示属性

使用:show-overflow-tooltip="true"

    <el-table :data="serviceList" style="width: 100%">
      <el-table-column align="center" label="序号" prop="index" width="80" fixed />
      <el-table-column :show-overflow-tooltip="true" align="center" label="中文题目" width="500" fixed>
        <template #default="scope">
          <el-link class="linkColor" @click="detailService(scope.row)"> {{ scope.row.name }} </el-link>
        </template>
      </el-table-column>
      <el-table-column :show-overflow-tooltip="true" align="center" label="发表刊名" prop="periodical" width="100" />
      <el-table-column :show-overflow-tooltip="true" align="center" label="所属领域" prop="signory" width="220" />
      <el-table-column :show-overflow-tooltip="true" align="center" label="所属单位" prop="platAndEnterPriseInfo" width="200" />
      <el-table-column :show-overflow-tooltip="true" align="center" label="作者" prop="personnel" width="200" />
      <el-table-column :show-overflow-tooltip="true" align="center" label="发表日期" prop="outputTime" width="120" />
      <el-table-column :show-overflow-tooltip="true" align="center" label="更新时间" prop="updateTime" width="100" fixed="right"/>
      <!-- 没有审核中的状态 暂时未做判断 -->
      <el-table-column align="center" label="操作" prop="name" width="150" fixed="right">
        <template #default="scope">
          <el-tooltip content="编辑" placement="top">
            <el-button link type="warning" icon="Edit" @click="editService(scope.row)"></el-button>
          </el-tooltip>
          <el-tooltip content="详情" placement="top">
            <el-button link type="success" icon="View" @click="detailService(scope.row)"></el-button>
          </el-tooltip>

          <!-- <el-text class="mx-1" type="danger" @click="deleteServiceItem(scope.row)" >删除</el-text> -->
        </template>
      </el-table-column>
    </el-table>

注意：这里是使用了Tooltip 文字提示组件

实现溢出内容自动隐藏，可使用css，可以直接给元素标签使用下:show-overflow-tooltip="true"

 看此组件是否带了隐藏样式，不行得话，再单独使用如下css实现

.overflow-hidden {  
  overflow: hidden; /* 隐藏溢出内容 */  
  text-overflow: ellipsis; /* 当文本溢出时显示省略号 */  
  white-space: nowrap; /* 防止文本换行 */  
  width: 100px; /* 设置容器宽度以触发溢出 */  
}