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(';')
        }
    }
},
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值