vue <el-tree> 加鼠标悬停提示文字
vue标签悬停子节点点击事件
·
今天领导让给<el-tree> 加鼠标悬停提示文字事件,查看了element官网,有个自定义,通过插槽自定义树节点的内容,参数为 { node, data }
上代码:
<el-tree
@node-click="handleNodeClick"
class="filter-tree"
:data="data"
node-key="label"
:props="defaultProps"
default-expand-all
:filter-node-method="filterNode"
ref="tree"
:current-node-key = "currentNodeKey"
highlight-current
>
<span slot-scope="{ node, data }" class="custom-tree-node showname" :title="node.label" v-text="node.label">
</span>
</el-tree>
.showname {
width: 60px; // 定宽
overflow: hidden !important; // 溢出部分隐藏
white-space: nowrap !important; //禁止自动换行
text-overflow: ellipsis !important; // 使溢出部分以省略号显示
display: block !important;
}
data () {
return {
data: [],
defaultProps: {
children: 'children',
label: 'label'
},
}
},
methods: {
handleNodeClick(e) {
const a = this.$refs.tree.getNode(e.label);
if (a.childNodes.length === 0) { // 判断最后一个子节点
// 做自己业务
}
},
}
其他样式可以根据项目自行调节。slot-scope部分是重点更多推荐



所有评论(0)