vue elementui 文件显示时名字过长进行隐藏，鼠标放上去显示全部，点击可导出

原创于 2025-04-17 17:32:52 发布 · 251 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui #前端

<el-upload class="upload-demo" action  multiple :file-list="contractList" disabled> 
    <template #file="{file}">
      <div>
        <el-tooltip :content="file.name" placement="top">
          <el-button type="text" class="file-name" @click="handlePreview(file)">{{ file.name }}</el-button>
        </el-tooltip>
      </div>
    </template>
</el-upload>

//预览文件（导出）
handlePreview (file) {
    let link = document.createElement('a');
    link.style.display = 'none';
    link.href = file.url;
    window.open(link.href,'_blank');
},

//样式
<style scoped>
.file-name {
  display: inline-block;//
  max-width: 120px;//显示最大宽度
  white-space: nowrap;//不换行
  overflow: hidden;//超出隐藏
  text-overflow: ellipsis;//超出的三个点替换
}
</style>