vue表格显示字符串过长问题解决

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，以上就是三种处理方式，推荐使用第三种，适用多个场景，不仅是表格。