vue3+ts+element-plus 中el-tree树形菜单内容过长处理(截取成...并鼠标指上去提示)

整体思路是使用插槽v-slot来处理下数据,然后先判断内容长度,如果过长则使用El-Tooltip进行展示并提示,下面直接上代码(直接引入v-slot插槽及内内容即可实现):

	
		
			{{data.label}}
			
				{{ellipsis(data.label,12)}}
				
			
		
	

以下为ts处理代码,目的是 省略多余字符,用...显示:

	

 展示效果如下,提示样式有三个效果可选dark、light、customized,具体可查官网:

vue3+ts+element-plus 中el-tree树形菜单内容过长处理(截取成...并鼠标指上去提示)_第1张图片vue3+ts+element-plus 中el-tree树形菜单内容过长处理(截取成...并鼠标指上去提示)_第2张图片

你可能感兴趣的:(Vue3,vue.js,elementui,javascript,树形菜单,内容过长提示)