wang域名建的网站,345诛仙网站是谁做的,静态网页模板 网站模板,wordpress固定连接nginxel-tree改造了下 可选可取消 有默认值 不包含父级id 默认展开 点击节点也可触发选择 节点内容自定义 template{{ childKeys }}!--default-checked-keys:默认展开值#xff08;正常来说需要包含父级id的 但是我们后端不要后端id #xff09;show-checkbox#x… el-tree改造了下 可选可取消 有默认值 不包含父级id 默认展开 点击节点也可触发选择 节点内容自定义 template{{ childKeys }}!--default-checked-keys:默认展开值正常来说需要包含父级id的 但是我们后端不要后端id show-checkbox多选框node-key每个树节点用来作为唯一标识的属性整棵树应该是唯一的default-expand-all是否默认展开所有节点expand-on-click-node是否在点击节点的时候展开或者收缩节点 默认值为 true如果为 false则只有点箭头图标的时候才会展开或者收缩节点default-checked-keys默认勾选的节点的 key 的数组check-on-click-node是否在点击节点的时候选中节点默认值为 false即只有在点击复选框时才会选中节点props配置选项具体看下表--el-tree reftreeRef stylemax-width: 600px :datadata show-checkbox node-keyid :default-expand-alltrue:expand-on-click-nodefalse :default-checked-keyschildKeys :check-on-click-nodetrue :propsdefaultPropscheck-changecheckChangetemplate #default{ node, data }span classcustom-tree-nodespan{{ node.label }}/spanspan stylecolor:red;margin-left: 10pxid:{{data.id }}/span/span/template/el-tree
/templatescript setup
import { ref } from vue;let treeRef ref(null);
let childKeys ref([5, 10]); // 初始化选中子节点的 ID
const defaultProps {children: children,label: label,
};const data [{id: 1,label: Level one 1,children: [{id: 4,label: Level two 1-1,children: [{id: 9,label: Level three 1-1-1,},{id: 10,label: Level three 1-1-2,},],},],},{id: 2,label: Level one 2,children: [{id: 5,label: Level two 2-1,},{id: 6,label: Level two 2-2,},],},{id: 3,label: Level one 3,children: [{id: 7,label: Level two 3-1,},{id: 8,label: Level two 3-2,},],},
];const checkChange () {// 获取所有选中的节点对象const checkedNodes treeRef.value.getCheckedNodes();// 结果1:获取包含父节点的idchildKeys.value treeRef.value.getCheckedKeys()// 结果2提取子节点的 ID不包括父节点childKeys.value checkedNodes.filter(node !node.children) // 只保留没有子节点的节点.map(node node.id); // 提取 IDconsole.log(默认值, childKeys.value, checkedNodes); // 只包含子节点的 ID
}
/script
