vue <el-tree> 加鼠标悬停提示文字
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/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部分是重点
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
9e887079
[skip ci] 1 年前
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 1 年前
新一代开源开发者平台 GitCode,通过集成代码托管服务、代码仓库以及可信赖的开源组件库,让开发者可以在云端进行代码托管和开发。旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。
更多推荐

所有评论(0)