Vue+ElementUI技巧分享:el-table 中实现灵活的文本换行

这篇具有很好参考价值的文章主要介绍了Vue+ElementUI技巧分享:el-table 中实现灵活的文本换行。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。


前言

Element UI 是 Vue.js 的一个流行组件库,广泛应用于构建企业级前端界面。在数据密集型的应用程序中,el-table 组件是展示和处理数据的核心。本文将详细探讨如何在 el-table 的单元格中实现不同的换行方式,以优化数据的显示效果。


一、使用 CSS 选择器实现换行

在某些情况下,我们可能需要处理包含换行符(如 \n\r\r\n)的文本数据。为了在表格单元格中正确显示这些换行符,可以使用 CSS 选择器来设置单元格的 white-space 属性。以下是如何实现它的示例:

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

在上述样式中,.container >>> .el-table .cell 选择器用于选择表格单元格,并通过设置 white-space 属性为 pre-line 来保持文本中的换行符。

如果>>>没有效果,可以尝试/deep/::v-deep方法。

css选择器使用实例:

使用选择器实现换行
<div class="container">
  <el-table :data="tableData">
    <el-table-column prop="textWithn"
                     label="文本中有\n换行符">
    </el-table-column>
    <el-table-column prop="textWithr"
                     label="文本中有\r换行符">
    </el-table-column>
    <el-table-column prop="textWithnr"
                     label="文本中有\n\r换行符">
    </el-table-column>
    <el-table-column prop="textWithrn"
                     label="文本中有\r\n换行符">
    </el-table-column>
    <el-table-column prop="longWordText"
                     label="长文本换行">
    </el-table-column>
  </el-table>
</div>

实现效果如图:
Vue+ElementUI技巧分享:el-table 中实现灵活的文本换行,Vue,# Element UI,vue.js,elementui,前端

二、使用 HTML 标签和 CSS 类实现换行

除了直接使用 CSS 选择器,我们还可以在 el-table-column 的模板中使用 HTML 标签(如 <p><div><span>)配合 CSS 类来实现换行。这种方法不仅能处理换行符,还能优雅地处理长文本或 URL 的自动换行。以下是相关的实现:

<el-table-column prop="textWithP" label="使用P标签">
  <template slot-scope="scope">
    <p class="wrap-text">{{ scope.row.textWithP }}</p>
  </template>
</el-table-column>
<style  lang="scss" scoped>
/* CSS 类用于换行 */
.wrap-text {
  white-space: pre-line;
}
</style>

在这个例子中,.wrap-text 类设置了 white-space: pre-line;,以便在表格单元格内正确显示换行符。

完整代码展示:

使用标签实现换行
<el-table :data="tableData2">
  <!-- 使用 <p> 标签 -->
  <el-table-column prop="textWithP"
                   label="使用P标签">
    <template slot-scope="scope">
      <p class="wrap-text">{{ scope.row.textWithP }}</p>
    </template>
  </el-table-column>

  <!-- 使用 <div> 标签 -->
  <el-table-column prop="textWithDiv"
                   label="使用Div标签">
    <template slot-scope="scope">
      <div class="wrap-text">{{ scope.row.textWithDiv }}</div>
    </template>
  </el-table-column>

  <!-- 使用 <span> 标签 -->
  <el-table-column prop="textWithSpan"
                   label="使用Span标签">
    <template slot-scope="scope">
      <span class="wrap-text">{{ scope.row.textWithSpan }}</span>
    </template>
  </el-table-column>

  <!-- 使用 CSS 类处理长单词换行 -->
  <el-table-column prop="longWordText"
                   label="长单词换行">
    <template slot-scope="scope">
      <div class="break-word">{{ scope.row.longWordText }}</div>
    </template>
  </el-table-column>
</el-table>

<style  lang="scss" scoped>
/* CSS 类用于换行 */
.wrap-text {
  white-space: pre-line;
}

/* 用于处理长单词或 URL 的换行 */
.break-word {
  word-break: break-all;
  overflow-wrap: break-word;
}
</style>

实现效果如图:
Vue+ElementUI技巧分享:el-table 中实现灵活的文本换行,Vue,# Element UI,vue.js,elementui,前端

三、利用数组实现每项数据单独一行

当我们的数据是数组格式时,我们可能希望每个数组元素在单元格内单独占一行。这可以通过使用 Vue 的 v-for 指令和 <br> 标签来实现。下面是一个示例:

<el-table-column label="Hobbies">
  <template slot-scope="scope">
    <div v-for="(hobby, index) in scope.row.hobbies" :key="index">
      {{ hobby }}<br>
    </div>
  </template>
</el-table-column>

这个方法使得数组的每个元素都在新的一行显示,从而提高了数据的可读性。

实现效果如图:
Vue+ElementUI技巧分享:el-table 中实现灵活的文本换行,Vue,# Element UI,vue.js,elementui,前端

四、动态生成带换行文本的表格

在更复杂的应用场景中,我们可能需要动态生成表格列。这可以通过结合 Vue 的 v-for 指令和参数绑定来实现。以下是一个使用动态列的示例:

<el-table :data="tableData4">
  <el-table-column v-for="column in columns"
                   :key="column"
                   :prop="column"
                   :label="column">
    <template v-slot:default="scope">
      <div class="wrap-text">{{ scope.row[column] }}</div>
    </template>
  </el-table-column>
</el-table>

在这种情况下,列的名称、属性和数据是动态绑定的,提供了极大的灵活性和可扩展性。

实现效果如图:
Vue+ElementUI技巧分享:el-table 中实现灵活的文本换行,Vue,# Element UI,vue.js,elementui,前端

五、完整代码演示

<template>
  <div>
    使用选择器实现换行
    <div class="container">
      <el-table :data="tableData">
        <el-table-column prop="textWithn"
                         label="文本中有\n换行符">
        </el-table-column>
        <el-table-column prop="textWithr"
                         label="文本中有\r换行符">
        </el-table-column>
        <el-table-column prop="textWithnr"
                         label="文本中有\n\r换行符">
        </el-table-column>
        <el-table-column prop="textWithrn"
                         label="文本中有\r\n换行符">
        </el-table-column>
        <el-table-column prop="longWordText"
                         label="长文本换行">
        </el-table-column>
      </el-table>
    </div>

    使用标签实现换行
    <el-table :data="tableData2">
      <!-- 使用 <p> 标签 -->
      <el-table-column prop="textWithP"
                       label="使用P标签">
        <template slot-scope="scope">
          <p class="wrap-text">{{ scope.row.textWithP }}</p>
        </template>
      </el-table-column>

      <!-- 使用 <div> 标签 -->
      <el-table-column prop="textWithDiv"
                       label="使用Div标签">
        <template slot-scope="scope">
          <div class="wrap-text">{{ scope.row.textWithDiv }}</div>
        </template>
      </el-table-column>

      <!-- 使用 <span> 标签 -->
      <el-table-column prop="textWithSpan"
                       label="使用Span标签">
        <template slot-scope="scope">
          <span class="wrap-text">{{ scope.row.textWithSpan }}</span>
        </template>
      </el-table-column>

      <!-- 使用 CSS 类处理长单词换行 -->
      <el-table-column prop="longWordText"
                       label="长单词换行">
        <template slot-scope="scope">
          <div class="break-word">{{ scope.row.longWordText }}</div>
        </template>
      </el-table-column>
    </el-table>

    利用数组实现换行
    <el-table :data="tableData3">
      <el-table-column prop="name"
                       label="Name"></el-table-column>
      <el-table-column label="Hobbies">
        <template slot-scope="scope">
          <div v-for="(hobby, index) in scope.row.hobbies"
               :key="index">
            {{ hobby }}<br>
          </div>
        </template>
      </el-table-column>
    </el-table>
    通过参数绑定的方式动态实现换行
    <el-table :data="tableData4">
      <el-table-column v-for="column in columns"
                       :key="column"
                       :prop="column"
                       :label="column">
        <template v-slot:default="scope">
          <div class="wrap-text">{{ scope.row[column] }}</div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'sample',
  data () {
    return {
      tableData: [
        {
          textWithn: '换行符有效果。\n这里有一个新行。',
          textWithr: '换行符没有效果。\r这里有一个新行。',
          textWithnr: '换行符有效果。\n\r这里有一个新行。',
          textWithrn: '换行符有效果。\r\n这里有一个新行。',
          longWordText: '这是一段非常长的单词或URL,需要自动换行处理:https://www.example.com/这是一个非常非常非常长的URL地址'
        }
        // ... 其他数据
      ],
      tableData2: [
        {
          textWithP: '这是一段使用<p>标签的文本。\n这里有一个新行。\n\r这里有一个新行。\r\n这里有一个新行。',
          textWithDiv: '这是一段使用<div>标签的文本。\n这里有一个新行。\n\r这里有一个新行。\r\n这里有一个新行。',
          textWithSpan: '这是一段使用<span>标签的文本。\n这里有一个新行。\n\r这里有一个新行。\r\n这里有一个新行。',
          longWordText: '这是一段非常长的单词或URL,需要自动换行处理:https://www.example.com/这是一个非常非常非常长的URL地址'
        }
        // ... 其他数据
      ],
      tableData3: [
        { id: 1, name: 'Alice', hobbies: ['Reading', 'Traveling', 'Cooking'] },
        { id: 2, name: 'Bob', hobbies: ['Sports', 'Music'] }
        // ... 其他数据
      ],
      columns: [
        'column1',
        'column2',
        'column3',
        'column4'
      ],
      tableData4: [
        {
          column1: '这是一段column1的文本。\n这里有一个新行。\n\r这里有一个新行。\r\n这里有一个新行。',
          column2: '这是一段column2的文本。\n这里有一个新行。\n\r这里有一个新行。\r\n这里有一个新行。',
          column3: '这是一段column3的文本。\n这里有一个新行。\n\r这里有一个新行。\r\n这里有一个新行。',
          column4: '这是一段非常长的单词或URL,需要自动换行处理:https://www.example.com/这是一个非常非常非常长的URL地址'
        }
        // ... 其他数据
      ]
    }
  }
}
</script>
<style  lang="scss" scoped>
.container >>> .el-table .cell {
  white-space: pre-line;
}
/* CSS 类用于换行 */
.wrap-text {
  white-space: pre-line;
}

/* 用于处理长单词或 URL 的换行 */
.break-word {
  word-break: break-all;
  overflow-wrap: break-word;
}
</style>

实现效果如图:
Vue+ElementUI技巧分享:el-table 中实现灵活的文本换行,Vue,# Element UI,vue.js,elementui,前端


总结

通过以上几种方法,可以在 Element UI 的 el-table 组件中灵活地实现不同的换行方式,以适应各种数据展示的需求。无论是处理含有换行符的文本、显示数组数据,还是动态生成表格列,Element UI 都提供了强大且灵活的解决方案。文章来源地址https://www.toymoban.com/news/detail-811085.html

到了这里,关于Vue+ElementUI技巧分享:el-table 中实现灵活的文本换行的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue 获取elementUI中的el-table里每一行的index并传到方法中

    通过在el-table组件上绑定@row-click事件,获取所点击的行的index: 请注意,在处理handleRowClick方法时,我们需要计算出所点击的行在el-table数据数组中的位置,这里使用了event.target.parentNode.rowIndex-1来获取其索引值。 使用element-ui中的slot-scope属性,将每一行的索引传递给自定义列

    2024年02月10日
    浏览(48)
  • Vue2+ElementUI的el-table实现新增数据行与删除的功能

    TableIndex.vue 如下 新增 按钮添加数据行 删除 按钮提示是否继续删除

    2024年04月23日
    浏览(45)
  • vue+ElementUI el-table表格单元格编辑增加键盘事件功能(向上、向下、回车键盘事件)

    1、如果单元格编辑使用了插槽功能,需要在插槽上添加一个class(这个类即:当前列的porp值) 2、porp不能重复(正常也不会存在) GitHub源码地址 Gitee源码地址 基于ElementUi或Antd再次封装基础组件文档 TTable组件封装地址

    2024年02月11日
    浏览(65)
  • 前端vue+elementui导出复杂(单元格合并,多级表头)表格el-table转为excel导出

    需求 :前端对el-table表格导出 插件 : npm install xlsx -S npm install file-saver --save 原理 :直接导出el-table的表格里面的数据,这样就会存在缺点,只会导出当前页面的数据,如果需要导出全部数据,可以自己重新渲染一个全部数据不可见的el-table表格,来导出就可以了 扩展 :经过

    2024年02月04日
    浏览(66)
  • vue elementui 实现从excel从复制多行多列后粘贴到前端界面el-table

    可以全部复制粘贴,也可以单独对某行、某列进行复制粘贴 从excel复制粘贴到前端页面的table上 html部分: js部分:

    2024年02月04日
    浏览(57)
  • vue2+elementui的el-table固定列会遮住横向滚动条以及错位

    我是最右侧固定列,所以下面的class名称是 .el-table__fixed-right , 如果有左侧固定请自行替换为 el-table__fixed 防止固定列表格高度错位 如果还没有解决错位, 请看你的 el-table__body-wrapper 是不是自己写了 max-height 的样式属性, 这会影响固定列定位的 解决固定列错位后, 接下来就是

    2024年02月02日
    浏览(49)
  • 修改(elementui)el-table底层背景色

    先给table添加类名(如class=\\\"styleTable\\\") 在style上面添加scoped 写法:类名 ::v-deep .el-table类名{} 注意:给styleTable也设置背景色为透明才生效。 如下图所示👇 单独创建一个css文件,给el-table th,el-table_cell等你要修改的类名添加背景色为透明;在每个vue页面都引用此文件即可生效。

    2024年02月10日
    浏览(70)
  • 【ElementUI】el-table中复选框禁用处理

    Vue 项目开发过程中,尤其是后台管理开发,经常会用到 ElementUI 中的表格和表单,有时候我们需要在表格中添加复选框,来实现全选和单选当前行的操作,而这时如果有条件要限制选框是否禁用该如何处理呢?这就需要展开来说了,因为表头全选和表格行中的单个选择处理是

    2024年02月07日
    浏览(38)
  • 在配置了 el-table 组件的合计行后,由于elementUI 表格el-table设置高度之后,合计行功能不会显示

    在配置了 el-table 组件的合计行后,由于elementUI 表格el-table设置高度之后,合计行功能不会显示 根据调试,发现该问题应该属于组件bug,表格主体中给 footer 留的高度不够导致,重新设置即可。 添加生命周期钩子 updated ,对 table 组件重新布局即可解决问题。具体如下: Vue 文

    2024年02月07日
    浏览(59)
  • elementUI中的el-table表头和内容全部一行显示完整

    项目上有一个需求,需要用el-table来显示数据,有一个要求就是不能换行。表头不能换行,表格里面的内容也不能换行。 同事写的页面使用的是vue3,自定义了一个事件来动态变化每一列的参数。我将其挪用到vue2中完全没法使用。只能在网上查找资料来实现它。 表格通过接口

    2024年02月07日
    浏览(42)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包