教学方面网站建设,知道创宇 wordpress,网站管理助手3.0,长沙网站公司[ant-design-vue] tree 组件功能使用描述环境信息相关代码参数说明描述
是希望展现一个树形的菜单#xff0c;并且对应的菜单前有复选框功能#xff0c;但是对比官网的例子#xff0c;我们在使用的过程中涉及到对半选中情况的处理#xff1a; 半选中状态#xff1a; 选中…
[ant-design-vue] tree 组件功能使用描述环境信息相关代码参数说明描述
是希望展现一个树形的菜单并且对应的菜单前有复选框功能但是对比官网的例子我们在使用的过程中涉及到对半选中情况的处理 半选中状态 选中子节点中的一个leaf节点后该节点是被选中的但是其它节点是未选中的那么此时父节点 parent1 与parent 1-0 都是半选中状态 全选中状态 被选中的子节点leaf是全选中状态 所有子节点都被选中的父节点是全选中状态
所以关于Api中的selectedKeys和checkedKeys 在设置时有很多疑问所以在研究后记录一下
环境信息 ant-design-vue: ^3.2.13,vue: ^3.2.45,相关代码
templatea-tree checkable :showLinetrue :showIcontrue :tree-datatree.data v-model:selectedKeyscheck v-model:checkedKeyschecked checkcheckNode/a-tree
/template
script langts setup
import { ref, reactive } from vue;
export default defineComponent({name: page-tree,setup(){const checkedKeys reactive({checked: [],//初始化所有选中叶子节点check: [],//当前全选中节点halfCheckedKeys: []//当前半选中节点});const initTreeCheckedKeys () {checkedKeys.checked[1,2,5,6]//排除了所有半选中的节点};const checkNode (check, event) {checkedKeys.check deepClone(check);checkedKeys.halfCheckedKeys deepClone(event.halfCheckedKeys);};const sumit(){//所有节点包括全选中与半选中的所有节点const allCheckedId[...checkedKeys.check,...checkedKeys.halfCheckedKeys]}initTreeCheckedKeys()return {...toRefs(checkedKeys),checkNode}}
})
/script参数说明
checkedKeys根据 checkedKeys 的api说明传递的只能是所有的叶子节点不能包含所有的父级节点否则根据联动规则对应父级节点的所有子节点都被选中对的。该参数是初始化全选中的节点。
selectedKeys操作之后的当前全选中节点
checkNode(check, event)参数说明 check全选中的所有节点包括父节点与子节点 event.halfCheckedKeys:半选中节点仅仅包含半选中节点
