关于el-tree...

最新推荐文章于 2024-12-06 11:52:42 发布
最新推荐文章于 2024-12-06 11:52:42 发布
阅读量1.1k 收藏
点赞数 1
分类专栏： 前端基础
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_32097903/article/details/97940296
版权
本文记录了在使用Element UI的el-tree组件时遇到的一个bug修复过程，详细介绍了如何查找并替换树形结构的数据来源，包括data、props、load等属性的使用，以及发现slot-scope也能加载数据的意外收获。
摘要由CSDN通过智能技术生成

https://element.eleme.cn/#/zh-CN/component/tree
今天我在改一个bug。需要把树形结构里面的数据表换成另一张表的数据。

代码中使用的是el-tree组件。我就百度了一下这个组件的用法，希望找到数据源头，然后再看看能不能把它换掉。看到了data属性可以加载树形表里面属性有data，props，load与数据相关。

翻到最下面还有个slot-scope 它也加载数据！一直没翻到最后看，偶然一翻翻到了！

这说明我浏览重要信息时要更加完整细致。

组件-Element---Tree （树形控件）
GU_AO_SHI_TAI_DU的博客
07-03 7911
组件-Element—Tree（树形控件） 组件—进度条 基础用法 <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree> <script> export default { data() { return { ...
el-tree-transfer.rar
04-10
实际上，el-tree-transfer 依赖的 element-ui 组件分别是Checkbox 多选框，Button 按钮，和最主要的Tree 树形控件写成！并非是在 element-ui 的穿梭框组件上的扩展，而仅仅是参照了其外观样式和功能。
el-tree
weixin_49547540的博客
02-23 1214
<el-tree class="tre" :icon-class="icon" show-checkbox node-key="nid" :default-checked-keys="checkIds" :default-expanded-keys="expandIds" ref="tree" highlight-cur
使用el-tree的常见需求场景(节点过滤 包含大小写、首字母)
最新发布
m0_61238598的博客
12-06 241
项目场景：通过关键字过滤树节点，包含大小写、首字母。
【Element】el-tree 树形控件
joanmelon的博客
12-10 1万+
☀️大家好，我是宾果的救星~希望记录的学习和收获能够帮助大家在开发过程中得到思路并且解决难题。希望大家多多点赞~爱你们哟~
el-tree的使用
青峦。的博客
11-29 589
el-tree的使用 el-tree复选框的使用 后台返回数据处理为el-tree展示格式，使没有子级时父级也不展示复选框，有子级时展开展示，如下图： 想不起来为什么有红框位置的代码，带我想一下再补充，但是这么写确实解决了我目前关于el-tree的需求 ...
el-tree 树形控件
szzlh123456789的博客
03-28 718
使树型结构相对应的节点展开。
el-select-tree:ElementUI的el-select与el-tree结合
05-07
ElementUI的el-select与el-tree结合在一起。 在线示例 用法 安装 npm install --save el-select-tree 需要element-ui 如果您的项目不使用element-ui，则需要引入一个单独的element-ui包，如下所示： import 'el-...
el-tree-select:基于el-select和el-tree改造的树形选择器（下拉框）组件
05-10
"el-tree-select:基于el-select和el-tree改造的树形选择器（下拉框）组件"是一个自定义的前端UI组件，它结合了Element UI库中的el-select和el-tree两个组件的功能，创建了一个适用于数据层级关系展示的选择器。...
el-tree-selected-tree
11-15
`el-tree-selected-tree` 描述的就是这样一个功能，它实现了在主`el-tree`之外，单独拉出一个展示已选中节点的树，并支持在该树上删除选中节点。 首先，我们需要理解`el-tree`的基本用法。`el-tree`通过`data`属性...
tree-1.5.3-3.el6.x86_64.rpm
06-26
tree-1.5.3-3.el6.x86_64.rpm tree 命令的安装包 center os 可以用
el-tree用法
u013023845的博客
02-21 2183
<el-Tree id="userMtree" ref="tree" class="user-manage-tree" :data="treeData" options="{options}" show-checkbox nodeKey="id" default-expand-all @check-chan...
el-tree树形控件
m0_63223221的博客
11-07 904
1、自定义树节点内容，鼠标悬浮树节点，右侧出现节点增删改操作；2、树形控件增加纵向滚动条；3、关键字过滤树节点数据；4、节点文本数据自适应宽度且溢出省略； 5、默认展开第一个节点；
VUE element-ui之el-tree树形控件循环遍历渲染dom节点；子节点横向排列；控件添加指示线
HanXiaoXi_yeal的博客
08-11 6326
VUE element-ui之el-tree树形控件循环遍历渲染dom节点；子节点横向排列；控件添加指示线
el-tree树形组件使用
热门推荐
weixin_46359814的博客
12-01 1万+
实现效果：可以添加分组，添加分组下面的业务包，以及一级分类显示加号，二级分类显示其他图标，点击省略号弹出下拉框操作，一级分类没有移动操作， <el-tree :data="groups" :props="defaultProps" style="padding-top: 20px;" highlight-current :default-expand-all=false @node-click="hand
el-tree.删除选中的节点
12-05
在Vue.js中，`el-tree`是Element UI库中的一个组件，用于展示树形结构的数据。要删除选中的节点，可以按照以下步骤进行： 1. **获取选中的节点**：首先需要获取用户选中的节点。`el-tree`组件提供了`getCheckedNodes`方法，可以获取所有选中的节点。 2. **删除节点**：根据获取到的节点数据，从数据源中删除对应的节点。 3. **更新数据**：将更新后的数据重新赋值给`el-tree`的数据源，以刷新树形结构。 以下是一个简单的示例代码： ```html <template> <div> <el-tree :data="treeData" show-checkbox node-key="id" ref="tree" :props="defaultProps"> </el-tree> <el-button @click="deleteSelectedNodes">删除选中节点</el-button> </div> </template> <script> export default { data() { return { treeData: [ { id: 1, label: '节点1', children: [ { id: 11, label: '节点1-1', children: [] } ] }, { id: 2, label: '节点2', children: [] } ], defaultProps: { children: 'children', label: 'label' } }; }, methods: { deleteSelectedNodes() { const checkedNodes = this.$refs.tree.getCheckedNodes(); checkedNodes.forEach(node => { this.deleteNode(this.treeData, node); }); }, deleteNode(nodes, nodeToDelete) { for (let i = 0; i < nodes.length; i++) { if (nodes[i].id === nodeToDelete.id) { nodes.splice(i, 1); return; } if (nodes[i].children) { this.deleteNode(nodes[i].children, nodeToDelete); } } } } }; </script> ``` 在这个示例中，`el-tree`组件展示了树形结构的数据。用户可以选中多个节点，然后点击“删除选中节点”按钮，选中的节点将被删除。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值