iview tree文字过长设置成带...同时鼠标悬浮出现文字提示
效果如图:
代码:
</template>
<div>
<Tree :data="valueListData" :render="renderContent"></Tree>
</div>
</template>
methods: {
renderContent(h,{ root, node, data}) {
let texts = '';
if(data.title !== null && data.title !== undefined && data.title !== ''){
if(data.title.length > 17){
texts = data.title.slice(0,17) + "...";
}else{
texts = data.title;
}
}
return h('div', {
style:{
display: "inline-block",
width: "100%",
cursor: "pointer"
},
on:{
click:()=>{
this.accttran(data,1)
}
}
},[
h('Tooltip',{
props:{
placement:'top',
transfer:true,
maxWidth:270,
},
},
[ h('span', [
h('div', {style: {display: 'inline-block', width:'4px', height:'4px', borderRadius:'2px', background:'#ffa913', marginRight:'5px', float: 'left', marginTop: '9px'}}),
h('span', texts)
]),h('span',{
slot:'content',
style:{
whiteSpace:'normal',
}
},data.title)]
),
])
},
}
注:h('span', [
h('div', {style: {display: 'inline-block', width:'4px', height:'4px', borderRadius:'2px', background:'#ffa913', marginRight:'5px', float: 'left', marginTop: '9px'}}),
h('span', texts)
])这部分是设置黄色小圆点 如果不需要替换成
texts
方法如下:
renderContent(h,{ root, node, data}) {
let texts = '';
if(data.title !== null && data.title !== undefined && data.title !== ''){
if(data.title.length > 17){
texts = data.title.slice(0,17) + "...";
}else{
texts = data.title;
}
}
return h('div', {
style:{
display: "inline-block",
width: "100%",
cursor: "pointer"
},
on:{
click:()=>{
this.accttran(data,1)
}
}
},[
h('Tooltip',{
props:{
placement:'top',
transfer:true,
maxWidth:270,
},
},
[ texts ,h('span',{
slot:'content',
style:{
whiteSpace:'normal',
}
},data.title)]
),
])
},