暂无图片
暂无图片
暂无图片
暂无图片
暂无图片
首页 / Element ui Tree树形控件介绍

Element ui Tree树形控件介绍

IT那活儿 2022-06-29
2292

点击上方“IT那活儿”公众号，关注后了解更多内容，不管IT什么活儿，干就完了！！！


  
在很多时候我们需要进行菜单配置，element ui tree树形控件就是非常好的选择，el-tree有清晰的层级结构用来展示菜单信息，可展开，折叠或拖拽。

一

常用属性

结构：
<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
data: [
{ label: '一级 1',
children: [
{ label: '二级 1-1',
children: [{ label: '三级 1-1-1' }]
}]
}]
defaultProps: { children: 'children', label: 'label' }
  • data：使我们要展示的数据，从后端获取。
  • prop：配置选项，defaultProps对象里的childen是那个属性要作为标签的子树。
  • label是那个属性作为标签的值展示出来，在这里面，就是childen，label，实际中要以后端接口里面需要展示的字段为准。
  • node-key:每个树节点用来作为唯一标识的属性，整棵树应该是唯一的。
  • check-on-click-node:只有在点击复选框时才会选中节点。
  • default-expanded-keys：默认展开的节点的 key 的数组。
  • show-checkbox：节点是否可被选择。
  • default-checked-keys：默认勾选的节点的 key 的数组，一榜用于回显。
  • filter-node-method：节点过滤，常用于搜索。


二

自定义节点内容

节点内容可以自定义，可以在节点区域添加按钮或图标等，比如添加，编辑，删除按钮。
两种方法树节点内容自定义：
1. 使用render-content指定渲染函数，该函数返回需要的节点区内容即可。
:render-content="renderContent"
renderContent(h, { node, data, store }) {
return (
<span class="custom-tree-node">
<span>{node.label}</span>
  <span><el-button></el-button></span>
</span>);
2. 使用 scoped slot 会传入两个参数node和data，分别表示当前节点的 Node 对象和当前节点的数据。
<span class="custom-tree-node" slot-scope="{ node, data }">
<span>{{ node.label }}</span>
<span><el-button></el-button></span>

</span>

三

节点拖拽

1. draggable：是否开启 拖拽功能。
2. allow-drop：拖拽时判定目标节点能否被放置。拖拽时判定目标节点能否被放置。type 参   数有三种情况：'prev'、'inner' 和 'next'，分别表示放置在目标节点前、插入至 目标节点和放置在目标节点后。
3. node-drop：拖拽成功触发的事件 ，主要是我们把数据发给后端，被拖拽节点对应的 Node、结束拖拽时最后进入的节点、被拖拽节点的放置位置（before、after、 inner）、event。

END




本文作者：朱 维（上海新炬王翦团队）

本文来源：“IT那活儿”公众号

datalabel
文章转载自IT那活儿，如果涉嫌侵权，请发送邮件至：contact@modb.pro进行举报，并提供相关证据，一经查实，墨天轮将立刻删除相关内容。

评论