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

文章目录

  • 前言
  • 一、使用 CSS 选择器实现换行
  • 二、使用 HTML 标签和 CSS 类实现换行
  • 三、利用数组实现每项数据单独一行
  • 四、动态生成带换行文本的表格
  • 五、完整代码演示
  • 总结

前言

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>

实现效果如图：
实现效果

二、使用 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 的 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 的 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>

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

实现效果如图：
实现效果

五、完整代码演示

<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>

实现效果如图：
实现效果

总结

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/335333.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Go语言基础快速上手

Go语言基础快速上手

1、Go语言关键字 2、Go数据类型 3、特殊的操作 3.1、iota关键字 Go中没有明确意思上的enum&#xff08;枚举&#xff09;定义&#xff0c;不过可以借用iota标识符实现一组自增常亮值来实现枚举类型。 const (a iota // 0b // 1c 100 // 100d // 100 (与上一…
阅读更多...
图像比特级置乱加密的安全性

图像比特级置乱加密的安全性

一、概述 Liu等人[1] 提出一种冗余空间转移&#xff08;简称&#xff1a;RST&#xff09;加密算法。RST加密中&#xff0c;用户首先将图像分解为8个位平面&#xff0c;根据位平面置乱秘钥置乱图像的位平面以改变图像的像素值。接着&#xff0c;将位平面置乱图像分块&#xff0…
阅读更多...
【第七在线】利用大数据与AI，智能商品计划的未来已来

【第七在线】利用大数据与AI，智能商品计划的未来已来

随着科技的快速发展&#xff0c;大数据和人工智能(AI)已经成为各行各业变革的重要驱动力。在服装行业&#xff0c;这两大技术的结合正在深刻改变着传统的商品计划方式&#xff0c;引领着智能商品计划的未来。 一、大数据与AI在智能商品计划中的角色 大数据为智能商品计划提供了…
阅读更多...
go语言（十）---- 面向对象封装

go语言（十）---- 面向对象封装

面向对象的封装 package mainimport "fmt"type Hero struct {Name stringAd intLevel int }func (this Hero) Show(){fmt.Println("Name ", this.Name)fmt.Println("Ad ", this.Ad)fmt.Println("Level ", this.Level)}func (thi…
阅读更多...
数据结构——Java实现栈和队列

数据结构——Java实现栈和队列

一、栈 Stack 1.特点 &#xff08;1&#xff09;栈是一种线性数据结构 &#xff08;2&#xff09;规定只能从栈顶添加元素&#xff0c;从栈顶取出元素 &#xff08;3&#xff09;是一种先进后出的数据结构&#xff08;Last First Out&#xff09;LIFO 2.具体实现 Java中可…
阅读更多...
Python 并发编程

Python 并发编程

文章目录 Python 并发编程1. 基本概念1.1 CPU 密集型计算1.2 IO 密集型计算1.3 多线程&#xff0c;多进程&#xff0c;多协程的对比1.4 怎么根据任务选择对应的技术&#xff1f; 2. 全局解释器锁 GIL2.1 Python 速度慢的两大原因2.2 GIL 是什么?2.3 为什么有 GIL ?2.4 怎样规…
阅读更多...
蓝桥杯备战 每日一题 （2）

蓝桥杯备战 每日一题 （2）

今天的题目是回忆迷宫 这个题目我们来熟悉一下 弗洛伊德算法 的代码模板 弗洛伊德算法用来处理最短路径问题 弗洛伊德算法&#xff08;Floyd’s algorithm&#xff09;用于解决图中所有节点对之间的最短路径问题。算法的基本思路是通过逐步迭代更新节点对之间的最短路径长度&a…
阅读更多...
力扣日记1.19-【二叉树篇】538. 把二叉搜索树转换为累加树

力扣日记1.19-【二叉树篇】538. 把二叉搜索树转换为累加树

力扣日记&#xff1a;【二叉树篇】538. 把二叉搜索树转换为累加树 日期&#xff1a;2023.1.19 参考&#xff1a;代码随想录、力扣 ps&#xff1a;因为准备组会汇报又搁置了好久&#xff08;其实就是懒逃避T^T)&#xff0c;但这是最后一道二叉树啦啊啊啊&#xff01;&#xff01…
阅读更多...
串口通信自用

串口通信自用

定义 串口&#xff08;Serial Port&#xff09;是一种用于数据通信的接口标准&#xff0c;它通过物理线路将数据以逐位的方式传输。串口通信可以在计算机和外部设备之间进行数据交换&#xff0c;常用于连接调制解调器、打印机、传感器、嵌入式系统等设备。常用的通信协议协议有…
阅读更多...
day02：列表、表格、表单

day02：列表、表格、表单

01-列表 作用&#xff1a;布局内容排列整齐的区域。 列表分类&#xff1a;无序列表、有序列表、定义列表。 无序列表 作用&#xff1a;布局排列整齐的不需要规定顺序的区域。 标签&#xff1a;ul 嵌套 li&#xff0c;ul 是无序列表&#xff0c;li 是列表条目。 <ul>…
阅读更多...
【信号与系统】【北京航空航天大学】实验四、幅频、相频响应和傅里叶变换

【信号与系统】【北京航空航天大学】实验四、幅频、相频响应和傅里叶变换

一、实验目的 1、 掌握利用MATLAB计算系统幅频、相频响应的方法&#xff1b; 2、 掌握使用MATLAB进行傅里叶变换的方法&#xff1b; 3、 掌握使用MATLAB验证傅里叶变换的性质的方法。 二、实验内容 1、 MATLAB代码&#xff1a; >> clear all; >> a [1 3 2]; …
阅读更多...
rabbitmq的介绍、使用、案例

rabbitmq的介绍、使用、案例

1.介绍 rabbitmq简单来说就是个消息中间件&#xff0c;可以让不同的应用程序之间进行异步的通信&#xff0c;通过消息传递来实现解耦和分布式处理。 消息队列&#xff1a;允许将消息发到队列&#xff0c;然后进行取出、处理等操作&#xff0c;使得生产者和消费者之间能够解耦&…
阅读更多...
C++初阶--自我实现vector

C++初阶--自我实现vector

实现模板 #include<assert.h> #include<string.h> #include<iostream> #include<list> using namespace std; namespace fnc {template<class T>class vector{public:typedef T* iterator;typedef const T* const_iterator;//构造函数vector(){…
阅读更多...
五、模 板

五、模 板

1 泛型编程 以往我们想实现一个通用的交换函数&#xff0c;可能是通过下面的方式来实现的&#xff1a; void Swap(int& left, int& right) {int temp left;left right;right temp; } void Swap(double& left, double& right) {double temp left;left ri…
阅读更多...
递归、搜索与回溯算法（专题一：递归）

递归、搜索与回溯算法（专题一：递归）

往期文章&#xff08;希望小伙伴们在看这篇文章之前&#xff0c;看一下往期文章&#xff09; &#xff08;1&#xff09;递归、搜索与回溯算法&#xff08;专题零&#xff1a;解释回溯算法中涉及到的名词&#xff09;【回溯算法入门必看】-CSDN博客 接下来我会用几道题&#…
阅读更多...
【深度学习每日小知识】Artificial Intelligence 人工智能

【深度学习每日小知识】Artificial Intelligence 人工智能

人工智能 (AI) 是一个快速发展的领域&#xff0c;有潜力改变我们的生活和工作方式。人工智能已经为从自动驾驶汽车到个性化医疗等各个行业做出了重大贡献。然而&#xff0c;与任何新技术一样&#xff0c;人工智能也存在许多问题和担忧。在这里&#xff0c;我们将探讨有关人工智…
阅读更多...
【Qt开发】初识Qt

【Qt开发】初识Qt

文章目录 1. Qt的背景1.1 Qt是什么1.2 Qt的发展史1.3 Qt支持的平台 2. Qt开发环境的搭建2.1 Qt SDK下载2.2 Qt SDK的安装 3. 一个简单的Qt模板程序的创建4. Qt模板程序的代码讲解4.1 main.cpp4.2 widget.h4.3 widget.cpp4.4 widget.ui4.5 test_1_18.pro4.6 一些中间文件 5. Qt在…
阅读更多...
算法训练 day24 | 77. 组合

算法训练 day24 | 77. 组合

77. 组合 题目链接:组合 视频讲解:带你学透回溯算法-组合问题 回溯其实和递归是密不可分的&#xff0c;解决回溯问题标准解法也是根据三部曲来进行的。 1、递归函数的返回值和参数 对于本题&#xff0c;我们需要用一个数组保存单个满足条件的组合&#xff0c;还需要另一个结果数…
阅读更多...
分布式搜索引擎ElasticSearch——深入elasticSearch

分布式搜索引擎ElasticSearch——深入elasticSearch

分布式搜索引擎ElasticSearch——深入elasticSearch 文章目录 分布式搜索引擎ElasticSearch——深入elasticSearch数据聚合聚合的分类DSL实现Bucket聚合DSL实现Metric聚合RestAPI实现聚合 自动补全DSL实现自动补全查询修改酒店索引库数据结构RestAPI实现自动补全查询实现酒店搜…
阅读更多...
elasticsearch6.6.0设置访问密码

elasticsearch6.6.0设置访问密码

elasticsearch6.6.0设置访问密码 第一步 x-pack-core-6.6.0.jar第二步 elasticsearch.yml第三步 设置密码 第一步 x-pack-core-6.6.0.jar 首先破解 x-pack-core-6.6.0.jar 破解的方式大家可以参考 https://codeantenna.com/a/YDks83ZHjd 中<5.破解x-pack> 这部分 , 也可…
阅读更多...
最新文章

Copyright @ 2022~2023