el-tree树组件给节点赋值半选中状态的方法

最新推荐文章于 2024-04-28 17:02:40 发布
最新推荐文章于 2024-04-28 17:02:40 发布
阅读量942 收藏 1
点赞数
文章标签： 1024程序员节
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51409195/article/details/134008701
版权

const node = this.$refs.dept.getNode(节点的 key或 data)//获取节点

if (node&&!node.checked) { // 此处应判断当前节点的checked属性是否为true，是则不必半选

  node.indeterminate = true

}

susu_study
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
element el-tree组件的动态加载、新增、更新节点的实现
10-15
主要介绍了element el-tree组件的动态加载、新增、更新节点的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue el-tree 默认展开第一个节点的实现代码
10-15
主要介绍了vue el-tree 默认展开第一个节点的实现代码,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
elementUi的树组件设置半选状态的方法（vue前端框架下）
qq_40139254的博客
07-13 1676
elementUi的树组件设置半选状态的方法（vue前端框架下） 直接上代码 <script src="//unpkg.com/vue/dist/vue.js"></script> <script src="//unpkg.com/element-ui@2.15.3/lib/index.js"></script> <div id="app"> <el-tree :props="props" :load="loadNode"
ant design vue 的 a-tree父节点半选的提交及反显问题
weixin_44309161的博客
04-09 528
【代码】ant design vue 的 a-tree父节点半选的提交及反显问题。
vue3中el-tree设置默认选中节点和展开节点
最新发布
m0_70547044的博客
04-28 1013
【代码】vue3中el-tree设置默认选中节点和展开节点。
el-tree回显数据半选和全选问题
weixin_45784423的博客
11-12 4494
后端返回数据是全选半选一起返回，el-tree严格模式如果勾选父节点子节点会全部勾选。 根据isLeaf 过滤只获取叶子节点(最底层节点),然后只设置底层节点，父节点自然会根据这些节点判断半选全选状态 const nodesList = [ 1, 5, 7, 8, 9 ] //后端返回的节点 this.$nextTick(() => { const nodes = [] nodesList.forEach(item => { const node = this.$re
element-ui el-tree 获取当前选中数据（含半选中的父节点）
Yujis的博客
08-31 6530
当不给el-tree组件设置check-strictly 属性时，默认为false，但是回显会有一些没有选中的节点都勾选上了，怎么解决呢？ 重新回到设置 check-strictly 为 true 时，父子级不互相关联，挨个点击用户体验不好的问题，同时也避免了出现半选的情况。 需要简化用户操作: (1)当点击复选框勾选父节点时，其父节点子节点会统一跟随选中，为选中状态 (1)当点击复选框勾选取消选中时，其父节点子节点会统一跟随为未选中状态 el-tree 标签属性 node-key：每个树节点用.
el-tree 树结构实现父子不关联(check-strictly) 且能全选、反选、半选
misschengispink的博客
10-18 5117
解决：单独把全部抽离出来，拉平树结构数据，根据选中长度同拉平后的数据长度进行对比实现全选、反选、半选。
element的tree的半选状态及回显问题解决
m0_66039084的博客
04-06 684
element的tree的半选状态及回显问题解决
elementUI中el-tree树形默认初始化高亮赋值
c_qianxia5040的博客
02-14 3570
setCurrentKey 通过 key 设置某个节点的当前选中状态，使用此方法必须设置 node-key 属性。node-key=“id” 每个树节点用来作为唯一标识的属性，整棵树应该是唯一的。highlight-current 是否高亮当前选中节点，默认值是 false。ref=“tree” 方便后面取值。第二步：设置当前高亮的节点。第三步、样式修改（非必须）第一步、添加相应属性。
element - ui tree树形控件 父级半选状态id和选中子级id一起传给后台, 回显去掉父级半选状态id
weixin_56383764的博客
01-16 1516
element - ui tree树形控件 父节点选中子节点全选 解决方式
el-tree修改时给后端返回子父节点的key，并且回显数据的时候，子节点未全部选中的父节点呈现半选的状态
yolo3712的博客
01-09 859
el-tree修改时给后端返回子父节点的key，并且回显数据的时候，子节点未全部选中的父节点呈现半选的状态
Element-ui el-tree新增和删除节点后如何刷新tree的实例
10-14
主要介绍了Element-ui el-tree新增和删除节点后如何刷新tree的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
ElementUI中el-tree节点的操作的实现
10-15
`el-tree`组件接收`data`属性，这是树形结构的数据源，`props`用于指定子节点和节点标签的属性名，`@node-click`监听节点点击事件，`show-checkbox`为节点添加复选框，`node-key`用于唯一标识每个节点，`check-...
解决element-ui u-tree树形组件父节点半勾选回显数据问题
imsopoor的博客
10-12 2477
问题描述：因为e-tree组件默认关闭了check-strictly就严格遵循了父子关联关系，只要父节点勾选上了，全部子节点默认会勾选上。如果接口返回的勾选节点id包括了父节点，其子节点都是会被e-tree默认勾上参考，大致的思路就是动态控制check-strictly，在回显之前开启父子节点互不关联，然后在节点获取到赋值id后再关闭，这样就能实现了 关键代码如下具体文章可移步但是这里也会有bug 就是父节点不会出现半勾选状态。这里就引出第二个。
el-tree包含下级回显半选状态一些问题
m0_47531829的博客
12-12 764
【代码】el-tree包含下级回显半选状态一些问题。
element-ui el-tree 设置回显节点半选 解决方案
CN_CKG__KK的博客
07-21 7167
1、element-ui el-tree 设置回显节点半选 解决方案 项目需求：树节点选择添加完后，再次编辑，若节点为全选，则设置为全选。若改节点下未设置全选，父节点设置为半全选 实现原理：利用tree组件渲染后带有的isLeaf(是否为叶子节点)属性，如果为叶子节点就选中。这样利用tree的API就实现了正确的回显效果。并没有过多的逻辑，只是利用tree本身的API 出BUG的概率也不会变高。手动设置node其实和prop的default-checked-keys ，原理是一样的，其实内部也都是循环
el-tree控件的使用，提交与回显，解决半选中状态
大哼的小世界
11-25 1273
<el-tree :data="menus" show-checkbox default-expand-all node-key="id" :default-checked-keys="menuIds" //选中项id组成的数组，如[1,2,3,4,5] ref="rootTree" :expand-on-click-node="false" :props="defaultProps"> </el-tree> export d.
el-tree全选父结点、半选当前结点获取
Roy__Jason的博客
12-07 918
el-tree全选父结点、半选当前结点获取
el-tree树如何展开节点后是另一个el-tree树
07-29
对于el-tree树展开节点后是另一个el-tree树的情况，你可以通过使用el-tree组件的自定义模板来实现。在展开节点时，你可以将子节点绑定到另一个el-tree组件的数据源中。 首先，确保你已经在项目中引入了el-tree组件。然后，在你的Vue组件中，可以这样定义el-tree组件： ```html <template> <div> <el-tree :data="treeData" :node-key="nodeKey" :props="defaultProps" @node-click="handleNodeClick"></el-tree> </div> </template> <script> export default { data() { return { treeData: [ { label: '节点1', children: [ { label: '子节点1', children: [ { label: '子节点1.1', }, { label: '子节点1.2', }, ], }, ], }, { label: '节点2', children: [ { label: '子节点2', children: [ { label: '子节点2.1', }, { label: '子节点2.2', }, ], }, ], }, ], nodeKey: 'label', defaultProps: { children: 'children', label: 'label', }, }; }, methods: { handleNodeClick(data) { // 在这里处理节点点击事件 // 获取点击的节点数据data，然后将其作为新的数据源赋值给另一个el-tree组件 this.treeData = data.children; }, }, }; </script> ``` 在上面的示例中，我们使用了el-tree组件的data属性绑定了树的数据源。当点击节点时，通过handleNodeClick方法获取到该节点的子节点数据，然后将其赋值给treeData，这样就实现了展开节点后显示另一个el-tree树的效果。 注意，你可以根据实际需求修改数据结构和事件处理逻辑。这只是一个简单的示例，希望能对你有所帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值