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)]
        ),

      ])
    },