vuetree勾选四个后不能勾选

vuetree勾选四个后不能勾选,第1张

1 可能存在已勾选项的子节点或父节点

2 VueTree组件的勾选规则是父节点勾选,则其所有子节点也会被勾选;反之,如果子节点全部勾选,则其父节点也会被勾选。

因此,如果已经勾选了一个父节点或子节点,再去勾选其子节点或父节点是无效的。

3 如果需要重新勾选,可以先取消已勾选的父节点或子节点,再勾选目标节点即可。

另外,VueTree组件还提供了一些API方法,可以通过编程方式改变节点的勾选状态。

有时候会用到card来进行展示数据,但是数据又要进行批量 *** 作,所以在循环的card数据下添加一个多选框能实现相应的功能满足需求。1、卡片内添加多选框:

v-model 代表多选框中显示的状态,选中与非选中,一般绑定一个数组,数组中存在的值就是选中状态。

label 代表多选框中选中的值。change 多选框改变事件,每次点击改变多选框都触发事件,绑定了一个ids方法。2、多选框的函数处理:

//获取数组中数值的下标

indexOf(val, ids) {

for (let i = 0i <ids.lengthi++) {

//获取当前值的下标

if (ids[i] === val) {

return i

}

}

return -1

},

//多选赋值ids

ids(val) {

//检索下标,判断当前值(或对象是否在数组中)在则返回在的对象,不在就是所有选中的id的值。3、遇到的问题:

此时element checked要点击两次才会显示勾选原因是:v-model已经改变了@change改变的值,所以相当于改变了两次解决办法:

将v-model 改为 :value 即可解决

今天在看之前的项目的时候,之前做过一个添加角色权限的功能,截图如下:

现在在我之前的项目中应用:

indeterminate 属性用以表示 checkbox 的不确定状态,一般用于实现全选的效果

(这里就是为什么上图每次点击全选按钮时候需要置为false、false即为全选按钮置为下图样式):

然后就能实现全选按钮了:

这里参考element官方文档即可实现,主要需要调整一下数据的格式即可。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/11883762.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-19
下一篇 2023-05-19

发表评论

登录后才能评论

评论列表(0条)

保存