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分支:25 天前 )
9e887079
[skip ci] 11 个月前
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 年前
更多推荐
所有评论(0)