转换特殊符号为换行，同时在el表格中实现换行渲染

最新推荐文章于 2024-01-20 11:22:36 发布

文生的丛林探险

最新推荐文章于 2024-01-20 11:22:36 发布

阅读量501

点赞数

文章标签：前端开发语言 vue

本文链接：https://blog.csdn.net/m0_57434037/article/details/126466538

版权

项目场景：

公司的后台管理系统，后端传过来的数据中有带号的，同时用elementUI表格进行渲染，此时表格中的数据是无规律的，想要以换行

解决前：
图片: ![Alt](https://img-home.csdnimg.cn/images/20220524100510.png 在这里插入图片描述
解决后：

在这里插入图片描述

解决方案：

1.处理数据

首先遍历后台传来的数据：
由于传过来的是个数组，其中包含着对象，我们需要找到对象中相对的key名，为orderNo进行操作即可
通过字符串indexOf("*")方法查找带号的orderNo,如果有，再通过字符串方法replace(/\*/g, "\n")将*号转行成\n换行，orderNo需要重新赋下值。
此时控制台报错，发现提示说不能为null，所以要判断下orderNo是否为null，就好了

	this.orderList.map((item, index, arr) => {
		if (item.orderNo !== null) {
        	    if (item.orderNo.indexOf("*") !== -1) {
              	item.orderNo = item.orderNo.replace(/\*/g, "\n");
           	 }
          }
}

说一下正则：
replace(/\*/g, "\n")中用的是正则表达式匹配
\r是回车，英文是Carriage return，作用：使光标到行首
\n是换行，英文是New line/line feed，作用：使光标下移一行
/g是全部匹配；
说一下数组的map()方法：

功能：
map的回调函数会将执行结果返回，最后map将所有回调函数的返回值组成新数组返回。
参数：map(callback);callback默认有三个参数，分别为value，index，self。

2.修改elementUI的css默认样式
操作完数据之后，需要穿透一下样式

<style scoped>
.app-container >>> .el-table .cell {
  white-space: pre-wrap;
}
</style>

至此，功能实现。

引用

https://blog.csdn.net/qq_45806781/article/details/110822912?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522166113695116782395394969%2522%252C%2522scm%2522%253A%252220140713.130102334…%2522%257D&request_id=166113695116782395394969&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2_alltop_positive~default-1-110822912-null-null.142^v42control,185^v2control&utm_term=%E5%AD%97%E7%AC%A6%E4%B8%B2%E6%96%B9%E6%B3%95&spm=1018.2226.3001.4187