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

Logo

前往低代码交流专区

更多推荐