脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue表格显示字符串过长

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

好了，这些仅为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • Vue实现两个列表之间的数据联动的代码示例

    Vue实现两个列表之间的数据联动的代码示例

    在Vue.js应用开发中,列表数据的联动是一个常见的需求,这种联动可以用于多种场景,例如过滤筛选、关联选择等,本文将详细介绍如何在Vue项目中实现两个列表之间的数据联动,并通过多个具体的代码示例来帮助读者理解其实现过程,需要的朋友可以参考下
    2024-10-10
  • Vue3中pinia的使用与持久化处理详解

    Vue3中pinia的使用与持久化处理详解

    Pinia 是一个基于 Vue 3 的状态管理库，可以更好地支持 TypeScript 和更灵活的状态管理方式，本文主要介绍了pinia的使用与持久化处理，需要的可以参考一下
    2023-07-07
  • Vue实现刷新当前页面的三种方式总结

    Vue实现刷新当前页面的三种方式总结

    项目当中如果做新增/修改/删除等等操作通常情况下都需要刷新数据或者刷新当前页面。本文为大家整理了三种不同的实现方法，需要的可以参考一下
    2023-01-01
  • vue 中 命名视图的用法实例详解

    vue 中 命名视图的用法实例详解

    这篇文章主要介绍了vue 中 命名视图的用法，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友参考下吧
    2019-08-08
  • 基于 Vue 实现一个酷炫的 menu插件

    基于 Vue 实现一个酷炫的 menu插件

    本文给大家介绍基于 Vue 实现一个酷炫的 menu插件，此篇教程需要大家具备一定的css和vue基础知识，本文分步骤给大家介绍的非常详细，需要的朋友参考下吧
    2017-11-11
  • VUE+Canvas实现简单五子棋游戏的全过程

    VUE+Canvas实现简单五子棋游戏的全过程

    这篇文章主要给大家介绍了关于VUE+Canvas实现简单五子棋游戏的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-05-05
  • 详解使用Vue Router导航钩子与Vuex来实现后退状态保存

    详解使用Vue Router导航钩子与Vuex来实现后退状态保存

    本篇文章主要介绍了详解使用Vue Router导航钩子与Vuex来实现后退状态保存，具有一定的参考价值，有兴趣的可以了解一下
    2017-09-09
  • vant中field组件label属性两端对齐问题及解决

    vant中field组件label属性两端对齐问题及解决

    这篇文章主要介绍了vant中field组件label属性两端对齐问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-05-05
  • vue实现图书管理demo详解

    vue实现图书管理demo详解

    这篇文章主要介绍了vue实现图书管理，分享了图书管理demo用的知识点，以及遇到问题的总结，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-10-10
  • Vue Router应用方法详解

    Vue Router应用方法详解

    在看这篇文章的几点要求：需要你先知道Vue-Router是个什么东西，用来解决什么问题，以及它的基本使用。如果你还不懂的话，建议上官网了解下Vue-Router的基本使用后再回来看这篇文章
    2022-09-09

最新评论