antd ant design vue 树形控件 check 具体详解
Ant design vue pro 树形控件操作下面是我的树形控件使用的地方<a-treev-if="treeData && treeData.value && treeData.value.length":checkedKeys="modelRef.menuIds":replace-fields="{ children: 'children', titl
·
Ant design vue pro 树形控件操作
下面是我的树形控件使用的地方
<a-tree
v-if="treeData && treeData.value && treeData.value.length"
:checkedKeys="modelRef.menuIds"
:replace-fields="{ children: 'children', title: 'label', key: 'id', value: 'id' }" //这里设置节点名字和节点参数
:defaultCheckedKeys="modelRef.menuIds"
:defaultExpandedKeys="modelRef.menuIds"
:tree-data="treeData.value"
@check="onCheck" //因为设置了checkable 所以是带选中状态 选中就会触发check
checkable
/>
在使用过程中发现了一个问题,就是树形控件他如果加了chenkable 他的父子节点关联就会失效,比如向下图,我如果只选中了菜单管理和行政区管理,传参数的话是没有传系统管理父节点的
所以需要解决这个问题 ,在选中的同时,组件第二个参数里有半勾选状态的参数集合,只需要把已勾选和半勾选的连接起来,就是全部需要传的参数,这里需要注意一下,不要将v-model绑定的id直接接手连接的数组,因为这样会导致所有的选中框选中,建议先存起来,提交时候做处理
提交解决了,然后回显发现了问题,如果又父节点,他会直接把子节点全部选中,不给你一点解释的机会,也是头疼了半天,最后发现一招有效的解决办法,讲回显的父节点全部删除,只留子节点,这样就完美实现了功能
for(let i in data){
console.log(data[i]);
if(listin.includes(data[i])){
delete data[i]
}
}
modelRef.menuIds = data || []
modelRef.menuIds = data || []
更多推荐
已为社区贡献4条内容
所有评论(0)