el-tag循环根据特定字符串换行

最新推荐文章于 2024-05-28 11:44:38 发布
最新推荐文章于 2024-05-28 11:44:38 发布
阅读量442 收藏
点赞数
文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42775083/article/details/130369295
版权

 

 遇到这个问题 根据数组的“|”判断换行，不想直接操作数组，然后就修改这个标签的span

世界那么大 我想去看看
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
自动换行Tag
05-01
NULL 博文链接：https://274137570-qq-com.iteye.com/blog/2405934
前端初识
weixin_34085658的博客
06-28 266
前端 接下来我们进入前端知识的学习，前端的学习目的就是为我们开发的应用程序提供一个与用户进行交互的界面，前端分为HTML5、CSS3、JavaScript三大部分，我们学习内容共分为HTML5、CSS3、JavaScript、jQuery前端框架及Bootstrap前端框架五个课程内容来介绍。 一、HTML5 HTML5是什么 HTML5就是html语言，数字5是该语言的版本号；h...
使用el-tag文字过长超出隐藏
zsj702177的博客
09-28 1371
在项目中使用el-tag的时候遇到了文字过长的问题，而tag不能换行，我使用的方法是截取，超过多吵得长度就截取到显示…
el-tag之间为什么会有间距？
weixin_42190844的博客
05-26 2043
在项目里使用多个el-tag，两两之间会有一个小间距。但是el-tag源码，是没有用 .el-tag + .el-tag兄弟选择器来作用margin的。也就是，他本身，是没有间距作用的。所以怀疑，是不是我项目里的其他css代码作用到了el-tag。但是全局搜索了.el-tag。也并没有找到这个css样式。 后来查了半天，发现是lnline-block的特性。 查看element-ui文档的官网，发现也是有间距的。即使把他作用的margin-left：10px去掉后，也还是有个小间距。 原因就是因为，spa
element--实现el-tag文字换行
Schaffer的博客
04-25 4610
一、样式 二、代码 <el-row :gutter="24" class="card-line" style="padding-left: 10px"> <el-col :span="5"> <el-tag effect="dark" type="info">未作答<br>5道</el-tag> </el-col> <el-col :span="5"> <el-tag effec
vue element-ui的＜el-tag＞实现文字超过自动换行
qq_38196449的博客
06-28 2425
今天我在使用element-ui的标签，但我发现一个问题，当我字体过多的时候，会出现这样的情况：文字远远超出了蓝色框的宽度，那么如何解决呢？
Conmi的正确答案——el-tag换行
Conmi的博客
12-22 1600
转自：解决element中el-tag不能换行 的评论： .el-tag { white-space: normal; height: auto; }
element 标签Tag之循环
kekexiaomayi的博客
03-09 508
element 标签Tag之循环
解决element中el-tag不能换行
Emma1314PYT的博客
12-03 4447
@解决element中el-tag不能换行 利用div来换行 knowledge: [ { label: '<div class="dobule-line">大腿骨骨折</div><div class="dobule-line">大腿骨骨折</div>' }, { label: '糖尿病' }, { label: '高血压' }, { label: '冠心病' }, { label: '支气管炎'
vue el-table内容换行
weixin_53561101的博客
06-06 4109
【代码】vue el-table内容换行。
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
10-17
主要介绍了VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
element 中 el-menu 组件的无限极循环思路代码详解
10-15
主要介绍了element 中 el-menu 组件的无限极循环,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
解决vue中el-tab-pane切换的问题
10-15
主要介绍了解决vue中el-tab-pane切换的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Python 笔记，不喜勿喷
weixin_40310390的博客
11-17 423
Python 小知识1.函数2.海龟绘图3.知识内容 1.函数 divmod---->divmod(a,b)----->a % b = c…d 最终形式是以（c ,d )展现 round ------>浮点型数值四舍五入 对字符串的操作 1. 不换行打印 print("set",end=" ")---->set ' ' 2. a.replace('原字符'，'替...
【el-tabs循环生成el-tab-pane，一行无法完全展示时（内容标签页非常多），实现换行展示。
qq_42177166的博客
07-01 1749
el-tabs循环生成的el-tab-pane非常多的情况下，实现换行展示。
每天一剂开发良药
zhangxin09的专栏
10-12 2055
主要介绍一些小技巧之类，是为备忘也。
vue elementui的el-tag 实现文字超过自动换行
树上骑个猴的博客
03-27 4720
.el-tag{ white-space: normal; height:auto; }
el-table中单元格数据换行
Collapsar_的博客
01-16 1788
实现el-table单元格内数据换行显示。
书籍学习|基于SprinBoot+vue的书籍学习平台(源码+数据库+文档)
最新发布
JIngJaneIL的博客
05-28 1085
首先,论文一开始便是清楚的论述了平台的研究内容。其次,剖析平台需求分析,弄明白“做什么”,分析包括业务分析和业务流程的分析以及用例分析,更进一步明确平台的需求。然后在明白了平台的需求基础上需要进一步地设计平台,主要包罗软件架构模式、整体功能模块、数据库设计。本项目软件架构选择B/S模式和java技术，总体功能模块运用自顶向下的分层思想。再然后就是实现平台并进行代码编写实现功能。论文的最后章节总结一下自己完成本论文和开发本项目的心得和总结。通过书籍学习平台将会使书籍学习各个方面的工作效率带来实质性的提升。
el-table中数据根据字符来换行
06-08
在 `el-table` 中，可以通过定义 `formatter` 函数来自定义表格中的数据展示方式。如果想要根据字符来实现自动换行，可以通过使用 CSS 的 `word-break` 属性来实现。 具体实现步骤如下： 1. 在 `el-table-column` 中定义 `formatter` 函数，该函数接收两个参数：`row` 表示该行数据，`column` 表示该列属性。例如： ```html <el-table-column label="内容" prop="content"> <template slot-scope="scope"> {{ scope.row.content }} </template> <template slot="header"> <span>内容</span> </template> <template slot-scope="{ row }"> <div class="table-content">{{ row.content }}</div> </template> </el-table-column> ``` 2. 在 `formatter` 函数中返回需要展示的 HTML 内容，可以在返回的内容中使用 `<span>` 或 `<div>` 等标签来包裹需要换行的字符，并设置 `word-break: break-all` 样式。例如： ```js <el-table-column label="内容" prop="content"> <template slot-scope="scope"> {{ scope.row.content }} </template> <template slot="header"> <span>内容</span> </template> <template slot-scope="{ row }"> <div class="table-content" v-html="breakWords(row.content)"></div> </template> </el-table-column> ... methods: { breakWords(str) { return '<span style="word-break: break-all;">' + str.replace(/(\r\n|\n|\r)/gm, '<br>') + '</span>'; } } ``` 在上面的例子中，`breakWords` 方法将字符串中的换行符替换为 `<br>` 标签，同时将 `<span>` 标签包裹在字符串周围，并设置 `word-break: break-all` 样式来实现自动换行。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值