[vue]使用Element--Tree 树形控件使用props解决自定义slot-scope=“{ node, data }“的对象问题

最新推荐文章于 2023-07-04 16:51:37 发布
最新推荐文章于 2023-07-04 16:51:37 发布
阅读量2.4k 收藏
点赞数
分类专栏： vue问题 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_61972561/article/details/131477620
版权
当使用slot-scope并接收到的数据结构中没有默认的lable和children字段，而是name和childList时，会导致内容和子节点无法正确识别。在这种情况下，需要自定义props对象以适配数据结构，确保正确渲染组件。
摘要由CSDN通过智能技术生成

 在未用props定义的情况下，slot-scope="{ node, data }"解析data对象只有data含有lable和children才能识别出内容和子节点

当我获取的数据如下，没有lable和children，使用的是name和childList，如下图所示：

注意props是对象形式，

 

 

 

 

热爱前端，学习前端
关注
专栏目录
vue2：树形控件el-tree中加载两种不同结构的数据
l_q_l的专栏
09-16 1898
需要在树形控件中逐级显示公司、部门以及不同部门下的项目信息。其中，公司及部门信息的结构是一致的，但是项目是另一种结构（类）。所以，树结构中需要用到两种不同结构的数据。
vue2/3 - element组件库el-tree树形控件实现一键全选/一键反选取消/全部收起/全部折叠/上下级父子是否联动功能，vue+element Tree树点击按钮全选和反选，收起折叠树结构
最新发布
高级前端工程师
03-20 2864
vue2，vue3，elementUI，element plus，Tree树形控件，el-tree，el-tree实现多选、反选，tree组件展开/折叠及全选/分组全选实现，element的树表格和树形控件折叠展开方法，element tree 如何全部展开、全部折叠，elmentui中树结构el-tree 多选功能，element el-tree折叠收缩，el-tree实现一键全选、反选功能，element Tree 树形控件 折叠、展开 全选、清空，树形结构全选、取消全选，展开收起，element中Tr
Element el-table树形数据 tree-props使用注意事项
m0_67402731的博客
03-08 2496
el-table树形数据 tree-props使用注意事项 项目场景： 问题描述： 解决方案： 写在最后 项目场景： 项目场景：使用el-table树形数据 问题描述： 根据element官网提示设置tree-props为{children: 'children',hasChildren: 'hasChildren'}，data数据也设置了children和hasChildren属性，row-key也绑定了数据的唯一值变量id，但是树形结构就是出不来 # 原因分析： 找了很久的问题原因
element ui使用slot-scope=“{ node, data }“ 报错- ReferenceError: node is not defined
咖啡味的小认真
05-15 2772
element ui使用slot-scope=“{ node, data }” 报错- ReferenceError: node is not defined 或者 引入element之后报错：Property or method “scope” is not defined on the instance but referenced during render 排查后发现是element版本和vue版本太低，升级后就不会报错了 vue.js下载地址： https://cdn.jsdelivr.net
Vue Element UI 中 el-table 树形数据 tree-props 多层级使用避坑
热门推荐
蓝胖子的博客
12-06 1万+
Vue Element UI 中 el-table 树形数据 tree-props 多层级使用避坑
vue中的slot用法
weixin_43844696的博客
01-04 1076
父组件： <NewsListItem :data="item" class="item-content"> <div slot="btns"> <span class="iconfont iconlingdang" :style="{color:[ 'rgb(204, 59, 59)', 'rgb(255, 110, 22)', 'rgb(255, 155, 0)', 'rgb(28, 167, 255)',][item.ala
Vue+Element UI 树形控件整合下拉功能菜单（tree + dropdown +input）
10-14
在这个组件中，`<el-tree>`是Element UI提供的树形控件，`data`属性接收树形结构数据，`node-key`用于唯一标识每个节点，`size`控制节点的大小，`highlight-current`高亮当前选中节点，`check-on-click-node`则在...
element el-tree组件的动态加载、新增、更新节点的实现
10-15
需要注意的是，el-tree 组件还提供了一些其他有用的属性和方法来支持树形控件的操作，例如 :props 属性用于自定义节点中各个字段的 key，node-key 用于指定节点唯一标识的字段，以及 lazy 属性用于配置节点的懒加载...
element组件中el-tree树形控件的使用
m0_50618406的博客
12-02 4282
我们在用element进行项目开发的时候，有时会要用到el-tree树形控件（比如我们对权限进行分配的时候），下面介绍关于el-tree常用的属性和方法 基础的树形控件结构 <el-tree :data="rightList" :props='treeProps' show-checkbox node-key='id' default-expand-all :default-checked-keys='defkeys' ref='treeRef'> </el-tree> 其中dat
element ui 中el-table的tree-props 勾选
cxl_3619的博客
07-04 1165
element ui 中el-table的tree-props 勾选全部无法影响到表格的子数据
el-tree使用Scoped Slot自定义树节点的内容
mwsblue的博客
03-10 7389
Element为我们提供了树形控件el-tree,不过在开发的过程中有时需求原因，需要重新定义树节点的内容，刚好官网就为我们提供了Scoped Slot。下面具体来看下怎么用吧~ <el-tree :data="trees" ref="treeList" node-key="tagId" :highlight-current="true" :default-expanded-keys="expandedkeys"
vue中使用el-tree组件,判断是节点还是叶子,添加图片
多看书少吃饭的博客
06-19 4524
vue中使用el-tree组件,判断是节点还是叶子,前方添加图片
element-ui中的el-tree组件自定义slot使用
Z姑娘早安
09-14 3290
element-ui中的el-tree组件自定义slot使用 <el-tree ref="tree" class="tree" v-show="!value" highlight-current :accordion="false" node-key="id" :data="[queryTree]" :props="defaultProps" :expand-on-click-node="false"
使用vue-cli和element-ui实现树形表格
"详解vue-cli+element-ui树形表格(多级表格折腾小计)" 在Vue.js的开发过程中，经常会遇到需要展示数据层级关系的情况，此时树形表格就显得尤为重要。Element UI是一个流行的UI组件库，提供了丰富的组件，但并非所有...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值