脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → element table组件内容换行

element table组件内容换行的实现方案

 更新时间：2023年12月06日 16:57:17   作者：stu_yiliang  
这篇文章主要介绍了element table组件内容换行的实现方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

背景

临时接手了一个element UI的前端项目，吐槽一下后台接口，这个idCardNo字段。

项目直接使用了el-table组件：

    <el-table
      :data="warnings"
      :row-class-name="highlightRow"
      v-loading="isLoading">
      <el-table-column
        label="ID"
        prop="id"/>
      <el-table-column
        label="时间"
        prop="time"/>
      <el-table-column
        label="身份证号"
        prop="idCardNo"
        width="300"/>
      <el-table-column
        label="车牌号"
        prop="busno"/>
      <el-table-column
        label="车站"
        prop="busstop"/>
      <el-table-column
        label="相似度"
        prop="sim"/>
      <el-table-column
        label="详情">
        <template slot-scope="scope">
          <el-button @click="detail(scope.row)" type="primary" size="mini" plain>查看</el-button>
        </template>
      </el-table-column>
      <el-table-column
        label="确认时间"
        prop="acktime"
        :formatter="timeFormatter"/>
    </el-table>

由于这个el-table组件中的数据源是直接给了一个对象，所以其实table中的每一个cell用户都不需要管。

前端截图的接口，没有经过操作之后直接显示的效果是：

很难看对吧。所以想要把cell里的内容也进行换行，至少得看的清楚吧？

解决方案

直接将warnings数据源中的每一个元素的对象中的字段用split分割，再用join拼接\n换行符之后，希望它能够起作用。但是实际F12 DOM树中的文字看到是进行了换行，但是el-table的cell纹丝不动。

使<pre>的内容自动换行。<pre> 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。

先尝试使用：word-wrap: break-word;将内容自动换行，IE，OP，Chrome，Safari都可以，FF就悲剧了。

查看了pre的浏览器默认样式中真正起作用的是white-space: pre这一条。

看看white-space的值：

  • normal 默认。空白会被浏览器忽略。
  • pre 空白会被浏览器保留。其行为方式类似 HTML 中的<pre> 标签。
  • nowrap 文本不会换行，文本会在在同一行上继续，直到遇到 <br>标签为止。
  • pre-wrap 保留空白符序列，但是正常地进行换行。
  • pre-line 合并空白符序列，但是保留换行符。
  • inherit 规定应该从父元素继承 white-space 属性的值。

按照我的需求，我希望它保留换行符。

于是添加了样式：

.el-table .cell {
  white-space: pre-line;
}

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • Vue 实现轮播图功能的示例代码

    Vue 实现轮播图功能的示例代码

    Vue是一款流行的前端框架，它提供了一系列的工具和组件，使得开发者可以更加便捷地创建交互式的Web应用程序，轮播图是Web应用程序中常见的一种交互式组件，本文将介绍如何使用Vue和第三方组件库 Element UI实现轮播图功能,需要的朋友可以参考下
    2023-05-05
  • Vue使用CDN引用项目组件，减少项目体积的步骤

    Vue使用CDN引用项目组件，减少项目体积的步骤

    这篇文章主要介绍了Vue使用CDN引用项目组件，减少项目体积的步骤，帮助大家提高项目加载速度，感兴趣的朋友可以了解下
    2020-10-10
  • 在vue中v-for循环遍历图片不显示错误的解决方案

    在vue中v-for循环遍历图片不显示错误的解决方案

    这篇文章主要介绍了在vue中v-for循环遍历图片不显示错误的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-01-01
  • 通过npm引用的vue组件使用详解

    通过npm引用的vue组件使用详解

    本文章通过实现一个vue-dialog的弹出层组件，然后附加说明如果发布此包到npm，且能被其他项目使用。本文给大家介绍的非常详细，需要的的朋友参考下
    2017-03-03
  • Vue组件间的双向绑定示例解析

    Vue组件间的双向绑定示例解析

    这篇文章主要介绍了Vue组件间的双向绑定，我们都知道当父组件改变了某个值后，如果这个值传给了子组件，那么子组件也会自动跟着改变，但是这是单向的，使用v-bind的方式，即子组件可以使用父组件的值，但是不能改变这个值
    2023-03-03
  • vue中nextTick函数和react类似实现代码

    vue中nextTick函数和react类似实现代码

    Vue 3 中的 nextTick 主要通过 Promise 实现异步调度,返回一个 Promise 对象,这篇文章主要介绍了vue中nextTick函数和react类似实现代码,需要的朋友可以参考下
    2024-04-04
  • 使用electron打包Vue前端项目的详细流程

    使用electron打包Vue前端项目的详细流程

    这篇文章主要介绍了使用electron打包Vue前端项目的详细流程,文中通过图文结合的方式给大家介绍的非常详细,对大家学习electron打包Vue有一定的帮助,需要的朋友可以参考下
    2024-04-04
  • Vue filter格式化时间戳时间成标准日期格式的方法

    Vue filter格式化时间戳时间成标准日期格式的方法

    今天小编就为大家分享一篇Vue filter格式化时间戳时间成标准日期格式的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • ESLint在Vue3 + TypeScript中的配置与使用方法

    ESLint在Vue3 + TypeScript中的配置与使用方法

    在Vue项目中配置ESLint,可以确保代码风格的一致性和代码质量,这篇文章主要介绍了ESLint在Vue3+TypeScript中配置与使用方法的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2025-12-12
  • vue-meta实现router动态设置meta标签的方法

    vue-meta实现router动态设置meta标签的方法

    这篇文章主要介绍了vue-meta实现router动态设置meta标签,实现思路非常简单内容包括mata标签的特点和mata标签共有两个属性，分别是http-equiv属性和name属性，本文通过实例代码给大家详细讲解需要的朋友可以参考下
    2022-11-11

最新评论