vue表格显示字符串过长的问题及解决
更新时间：2023年10月19日 15:56:34 作者：muLanlh
这篇文章主要介绍了vue表格显示字符串过长的问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
做项目时，通常我们会遇到字符串过长导致样式不好看的问题，这里有三种方式处理，第三种为最佳方案。
第一种
首先我们看下未做处理的样式：
可以看到学院字段过长，当然我引用的el-table自带的样式给自动换行了,但如果自己写的table会导致样式很丑。
我们可以用el-collapse来进行字符串处理
代码如下：
<el-table-column prop="collegeName"
align="center"
width="150"
label="学院">
<template slot-scope="scope">
<el-collapse v-if="scope.row.collegeName !== null">
<el-collapse-item :title="scope.row.collegeName.substring(0,6)">
<div>{{scope.row.collegeName}}</div>
</el-collapse-item>
</el-collapse>
</template>
</el-table-column>
但是这个样式非常丑
第二种
用el-tooltip处理,但是这种样式有限制，必须给定div宽度，否则不能实现隐藏，而且完整字段的位置会出现偏移，还是原字符串长度的中部，但是样式比第一种好看一些。
<div style="width: 100px;height: 20px;float: left">
<el-tooltip class="item" effect="dark" :content="scope.row.product.name" placement="top-start">
<span style="max-width: 6em;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">{{scope.row.product.name}}</span>
</el-tooltip>
</div>
第三种
终极方案，依旧使用el-tooltip，只是结合一下一二种方式。
代码如下：
<el-table-column prop="collegeName"
align="center"
width="150"
label="学院">
<template slot-scope="scope">
<el-tooltip class="item" effect="dark" :content="scope.row.collegeName" placement="top-start">
<span>{{scope.row.collegeName.substring(0,8)}}...</span>
</el-tooltip>
</template>
</el-table-column>
我们可通过控制substring的第二个参数来控制显示字符串的长度
结果如下：
总结
ok，以上就是三种处理方式，推荐使用第三种，适用多个场景，不仅是表格。
好了，这些仅为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
最近学习在vite项目中配置less,本文主要介绍了Vue3+Vite项目使用less的实现步骤,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习吧2024-02-02
使用element-ui +Vue 解决 table 里包含表单验证的问题
这篇文章主要介绍了使用element-ui +Vue 解决 table 里包含表单验证的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
最近在研究uni-app跨端开发APP和H5的通讯和交互,比如H5调用APP的方法,APP往H5里面传参,H5往app外面传参,这篇文章主要给大家介绍了关于uniapp webview和H5通信的3种方式,需要的朋友可以参考下2024-04-04
这篇文章主要给大家介绍了关于Vue项目启动白屏问题的几种解决办法,Vue项目打包后出现白屏的可能原因有很多,文中通过图文介绍的非常详细,需要的朋友可以参考下2023-12-12
这篇文章主要介绍了Vue中结合clipboard实现复制功能 ,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-09-09
这篇文章主要介绍了使用Vue自定义指令实现Select组件,如果哪位朋友对vue自定义指令不是多了解的话，此篇文章会对你有所帮助的，需要的朋友可以参考下2018-05-05
Vue2中使用自定义指令实现el-table虚拟列表的代码示例
在实际开发中,我们可能会面临其他需求,例如在 el-table 中无法使用分页技术的情况下展示海量数据,这种情况下,页面可能会出现卡顿,严重时甚至可能引发浏览器崩溃,所以针对这个问题本文给大家介绍了vue2中使用自定义指令实现el-table虚拟列表,需要的朋友可以参考下2025-01-01
这篇文章主要介绍了vue+vant实现商品列表批量倒计时功能,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2020-01-01
vue实现锚点跳转之scrollIntoView()方法详解
这篇文章主要介绍了vue实现锚点跳转之scrollIntoView()方法，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
Vue响应式原理Observer、Dep、Watcher理解
这篇文章主要介绍了Vue响应式原理-理解Observer、Dep、Watcher,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-06-06
最新评论