资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/Element ui Tree树形控件介绍

Element ui Tree树形控件介绍

IT那活儿 / 2685人阅读
Element ui Tree树形控件介绍

点击上方“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 对象和当前节点的数据。
class="custom-tree-node" slot-scope="{ node, data }">
<span>{{ node.label }}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那活儿”公众号

云服务器 GPU云服务器 element-ui element-ui dialog组件 treeview树形控件 javascript树形控件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/129428.html

相关文章

  • element-ui中el-tree树形控件-树节点的选择(选中当前节点,获取当前id并且获取其父级

    摘要：在的树形控件中默认获取选取当前选中的方法是但是如果子节点不是全部选中的话，父节点算不选中。由于我们一般想要的是就算只选中一个直接点父节点以及其父辈都算选中，所以需要自己写逻辑。 在element-ui的el-tree树形控件中默认获取选取当前选中id的方法是this.$refs.tree.getCheckedKeys();但是如果子节点不是全部选中的话，父节点算不选中。由于我们一般想要...

    MobService 评论0 收藏0

  • 一个基于vue和element-ui的树形穿梭框组件

    摘要：在市面上找到一个好用的树形穿梭框组件都很难，又不想仅仅因为一个穿梭框在之外引入其他重量级插件，因此就有了。版本增加穿梭框左侧右侧数据勾选事件，穿梭框左侧右侧底部。 el-tree-transfer 简介·请先阅读文档及版本说明 因为公司业务使用vue框架，ui库使用的element-ui。在市面上找到一个好用的vue树形穿梭框组件都很难，又不想仅仅因为一个穿梭框在element-ui之...

    Corwien 评论0 收藏0

  • vue+element tree(树形控件数据格式)组件(1)

    摘要：树形控件数据格式组件最近做了第一个组内可以使用的组件，虽然是最简版，也废了不少力。让我来记录这个树形组件的编写过程和期间用到的知识点。 vue+element tree(树形控件数据格式)组件(1), 最近做了第一个组内可以使用的组件，虽然是最简版，也废了不少力。各位前辈帮我解决问题，才勉强搞定。让我来记录这个树形组件的编写过程和期间用到的知识点。 首先说说需求，就是点击出现弹窗+蒙板...

    Pines_Cheng 评论0 收藏0

  • vue+element tree(树形控件数据格式)组件(1)

    摘要：树形控件数据格式组件最近做了第一个组内可以使用的组件，虽然是最简版，也废了不少力。让我来记录这个树形组件的编写过程和期间用到的知识点。 vue+element tree(树形控件数据格式)组件(1), 最近做了第一个组内可以使用的组件，虽然是最简版，也废了不少力。各位前辈帮我解决问题，才勉强搞定。让我来记录这个树形组件的编写过程和期间用到的知识点。 首先说说需求，就是点击出现弹窗+蒙板...

    wangdai 评论0 收藏0

发表评论

登陆后可评论

0条评论

IT那活儿

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<