坑：el-tree复选框动态禁用时，默认勾选的数据不显示

已于 2022-02-28 19:55:08 修改
阅读量1.7k 收藏
点赞数
分类专栏： vue element-ui 文章标签： elementui 前端 javascript
于 2022-02-28 19:35:18 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/GreyCastle/article/details/123190096
版权

①：首先保证el-tree的树形结构进行递归遍历使用的是this.$set添加disable属性。

②：保证default-checked-keys是最后一级节点不是父节点（大坑）

小灰灰城堡
关注
专栏目录
解决EasyUI中Tree的CheckBox不能设置为禁用的问题
10-29
//仅提供js代码 //这里使用的easyui1.3.6 //解决的问题是Tree控件的checkbox不能设置为不允许用户勾选 //设置一个标志位,在整棵树加载完成后就将标志位设置为false,不允许勾选checkbox了,在加载数据完成之前是可以勾选的,用来在数据中设置勾选了哪些节点 //这样就可以实现读取url数据时是可以设置勾选了哪些节点,在读取数据完成之后就不再让用户勾选节点了. //这个问题花了不少时间去查找,网上也没有找到解决办法,只能通过这样变相实现. //该程序实现了功能,但是没有让节点显示灰色,尚须完善 //发上来仅为了赚点儿小分,^_^,对不起大家了,希望能给您提供一点儿解决问题的灵感 //本解决思路由提供
el-tree，父节点的复选框不显示
timoingff的博客
06-29 1312
el-tree对父节点的选择框禁用。
vue中使用element ui的el-tree树形控件 选中子节点获取不到父节点以及回显问题
最新发布
daotianmi的专栏
08-31 506
使用getHalfCheckedKeys和getCheckedKeys获取数据然后合并两个数组。实际使用setCheckedKeys的效果并不是我们想要的效果。看文档使用setChecked循环给值。setChecked函数的效果。json数据格式如下。
element tree给含有默认勾选的树加disabled不生效
qq_36341137的博客
01-14 4285
要给tree的data递归赋值disabled，发现无法生效 <el-tree :data="data3" show-checkbox node-key="id" :default-expanded-keys="[2, 3]" :default-checked-keys="[5]"> </el-tree> <script> export default { data() { return { data3:
vue2/vue3中el-tree中，当disabled无效的时候，设置禁用节点
weixin_56205895的博客
07-25 4124
el-tree的禁用
element-ui tree 实现单选 遇到的问题不显示勾号
qq_48881427的博客
07-17 288
【代码】element-ui tree 实现单选 遇到的问题不显示勾号。
你不知道的vue——tree组件实现默认禁用选项
L3gacy
11-25 2869
tree组件实现默认禁用选项实现效果解决思路代码 实现效果 作为一个前端狗，需求有多奇葩，开发的脑洞就有多大。 先给你们看看产品想实现的功能： 既可以实现概况的全选功能，又要实现只选中概况，这明显是矛盾的 但是问题来了，这个效果图却可以实现这个需求，神奇不神奇！！ 然后细细研究发现，虽然查看浏览是不能点击的，但是他里面的状态是可以更改的，这压根就是一个禁用的复选框覆盖掉了查看浏览这个节点！！ 解决思路 所以接下来的事情就好办了，只要我们把查看浏览这个复选框用一个提前写好的禁用复选框覆盖掉就好了 那么哪里来
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实现el-transfer(穿梭框)的效果代码（全）
04-25
勾选右侧的已选资源，效果同左侧一样； 2、勾选全选，则资源全部添加到右侧，左侧的则显示为空 3、保存后点击编辑，左侧显示未分配的资源，右侧显示已分配的资源 4、后台给到的数据是：所有的资源（多维数组）和已...
基于vue v-for 循环复选框-默认勾选第一个的实现方法
12-29
应用场景：在进行多选的时候一般默认显示第一个。 实现方法：纯vue实现 例子： <span v-for=(one,index)><input type=checkbox :...以上这篇基于vue v-for 循环复选框-默认勾选第一个的实现方法就是小编分享给
vue el-tree 默认展开第一个节点的实现代码
10-15
9. 实际效果与应用：上述代码和方法的实现可以让开发者在使用Vue.js和Element UI开发项目时，快速实现el-tree组件默认展开第一层的第一个节点的功能。 总结：本文通过实例代码详细介绍了在Vue.js框架中，如何结合...
element el-tree组件的动态加载、新增、更新节点的实现
10-15
在动态加载节点数据时，使用了组件内提供的 api typeList 来异步获取数据，并通过 resolve 方法将数据传回 el-tree 组件，从而更新树形控件的显示。 新增节点是指在树形控件中添加一个新的节点。通常，我们会添加一...
vue中el-tree默认选中和全部禁用
ICanWin_lll的博客
02-08 3031
vue中使用el-tree设置默认选中和禁用
element-ui 树形控件default-checked-keys设置失效问题
weixin_44784830的博客
11-07 1988
设置了default-checked-keys和一个空数组 遍历完数据后，对应节点并没有渲染勾选 打断点调试显示数组里面是有值的 查阅以后发现是没有设置node-key="id" 设置完以后完美解决，节点成功勾选 ...
vue element-ui 修改el-tree节点的disabled状态
科学鸿的博客
08-17 8565
el-tree可以用show-checkbox来开启选择框。 在生成节点node的时候指定了disabled属性值，但后面需要修改这个节点的禁用状态。 此时如果直接 node.disabled=false，会报错： Uncaught (in promise) TypeError: Cannot set property disabled of #<e> which has only a getter 可以用 $set 来修改值。 this.$set(node, “disabled”, fal
ElementPlus el-tree-select设置禁选项
前端小陈的成长记录
03-15 2065
ElementPlus el-tree-select设置某一层级不可选择
关于element-ui中el-tree默认选择节点视图不更新问题的解决方案。
weixin_43362779的博客
05-16 3307
element-ui中el-tree默认选择节点更新但视图不更新问题的解决方案。
解决elementUI select 的disabled属性设置无效问题一例
10-27 5922
解决elementUI select 的disabled属性设置无效问题一例
el-select和el-tree结合下拉选
泪的结晶的博客
02-25 1341
实现效果： 代码： <template> <el-select style="width: 100%" :value="valueTitle" :clearable="clearable" :filterable="filterable" :disabled="disabled" @clear="clearHandle" remote :remote-method="remoteMethod"> <el-option .
el-tree 复选框从后台拿到数据 怎样回显
06-02
对于 element-ui 的 el-tree 组件，如果需要从后台拿到数据并进行复选框的回显，需要先将后台返回的数据转换成符合 el-tree 要求的数据格式，即包含 label、children、value、disabled、checked 等属性的对象数组。 然后在 el-tree 组件中使用 :props 属性来指定数据的属性字段，例如： ```html <el-tree :data="treeData" :props="{ label: 'name', children: 'children', disabled: 'disabled', checked: 'checked' }"></el-tree> ``` 其中，treeData 是转换后的数据对象数组。在 :props 中，需要指定 label、children、disabled、checked 等属性对应的字段名。 这样就可以实现从后台拿到数据并进行复选框的回显了。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值