vue表格显示字符串过长的问题及解决
作者：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，以上就是三种处理方式，推荐使用第三种，适用多个场景，不仅是表格。
好了，这些仅为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。