vue element tree自定义树,内容过长显示…鼠标悬浮显示全部两种方法
- 一种方法
<el-tree
:data="deptOptions"
:props="defaultProps"
:expand-on-click-node="false"
:filter-node-method="filterNode"
ref="tree"
:default-expand-all="false"
@node-click="handleNodeClick"
:render-content="renderContent"
/>
//放在methods:{}下面
renderContent(h, { node }) {
return (
<span class="custom-tree-node">
<span title={node.label}>{node.label}</span>
</span>)
},
如图所示
- 二种方法
<el-tree
:data="deptOptions"
:props="defaultProps"
:expand-on-click-node="false"
:filter-node-method="filterNode"
ref="tree"
:default-expand-all="false"
@node-click="handleNodeClick"
>
<span class="span-ellipsis" slot-scope="{ node, data }">
<el-tooltip class="item" effect="light" :content="node.label||''" placement="top-start">
<span>{{ node.label }}</span>
</el-tooltip>
</span>
</el-tree>
如图所示
全部示鼠标提示气泡