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(';')
}
}
},
在Vue.js项目中使用Element UI的el-tooltip组件,遇到内容过长需折行展示的问题。通过计算属性处理接口返回的字符串,将其拆分成数组并插入'<br/>'标签,实现多行显示。
1611

被折叠的 条评论
为什么被折叠?



