Element+Vue (el-tooltip的content折行展示)

在Vue.js项目中使用Element UI的el-tooltip组件,遇到内容过长需折行展示的问题。通过计算属性处理接口返回的字符串,将其拆分成数组并插入'<br/>'标签,实现多行显示。
部署运行你感兴趣的模型镜像

el-tooltip的content折行展示

问题描述:
1.接口给一个字符串,前端根据给定标志做折行操作
代码描述:
1.用计算属性接收字符串处理成相应数组返回
2.内容通过for循环每段语句和’<br/>'进行折行

<el-tooltip placement="top">
	<div slot="content">
	   	<span 
	       v-for="item in contentList(scope.row.str)" 
	       :key="item.id">{{item}}<br/>
	    </span>
	    <!--或者直接判断分隔符(假设显示的内容是scope.row.content)-->
	    {{scope.row.content.replace(/[\r\n]/g, '<br />')}}
	</div>
	<div>!</div>
</el-tooltip>
computed: {
    contentList() {
        return function(str) {
            return str.split(';')
        }
    }
},

您可能感兴趣的与本文相关的镜像

ACE-Step

ACE-Step

音乐合成
ACE-Step

ACE-Step是由中国团队阶跃星辰(StepFun)与ACE Studio联手打造的开源音乐生成模型。 它拥有3.5B参数量,支持快速高质量生成、强可控性和易于拓展的特点。 最厉害的是,它可以生成多种语言的歌曲,包括但不限于中文、英文、日文等19种语言

评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值