网站模版亮点,网站建设引流刘贺稳1,重庆工程建设信息网官网入口,wordpress固定链接显示404el-tree的使用及控制全选、反选、获取选中 组件使用获取选中的id全选实现反选实现全部代码 组件使用
引入组件#xff0c;可以参考官网组件引入参考官网示例写好基础数据结构#xff0c;不知道怎么转换树形机构的看文章#xff1a;一维数组转树形
templateel-… el-tree的使用及控制全选、反选、获取选中 组件使用获取选中的id全选实现反选实现全部代码 组件使用
引入组件可以参考官网组件引入参考官网示例写好基础数据结构不知道怎么转换树形机构的看文章一维数组转树形
templateel-treestylemax-width: 600px:datadata:propspropsshow-checkbox/
/templatescript setup
const handleNodeClick (data) {console.log(data)
}const data [{label: Level one 1,children: [{label: Level two 1-1,children: [{label: Level three 1-1-1,},],},],},{label: Level one 2,children: [{label: Level two 2-1,children: [{label: Level three 2-1-1,},],},{label: Level two 2-2,children: [{label: Level three 2-2-1,},],},],},{label: Level one 3,children: [{label: Level two 3-1,children: [{label: Level three 3-1-1,},],},{label: Level two 3-2,children: [{label: Level three 3-2-1,},],},],},
]const props {children: children,label: label,
}
/script获取选中的id
通过获取tree组件操作方法进行获取
给组件绑定一个ref
el-tree reftreeRef node-keyid stylemax-width: 600px :propsprops :datadata show-checkbox /声明变量
const treeRef ref(null)操作组件方法
// 获取选中数据
const handleCheckChange () {// 方法一获取key此方法必须设置属性node-key!!!console.log(treeRef.value.getCheckedKeys(false))// 返回被选中的key也就是id// 方法二获取节点nodeconsole.log(treeRef.value.getCheckedNodes(false))// 返回被选中的对象
}全选实现 思路获取全部的key也就是id然后通过赋值的操作来实现效果 // 用于判断是全选还是取消
let isAll false;
// 全选
const all () {if (isAll) {treeRef.value.setCheckedKeys([], false)isAll false} else {// 获取所以的id如果有一维数组则直接循环获取即可const nodeKeys [];function getAllKeys(data) {data.forEach(node {nodeKeys.push(node.id);if (node.children) {getAllKeys(node.children);}});}getAllKeys(treeData.value);treeRef.value.setCheckedKeys(nodeKeys, false)isAll true}
}反选实现 思路 获取当前选中的key全部选中将第一步获取的key节点设置为取消 // 反选
const reverse () {// 1. 获取当前选中的keylet checked treeRef.value.getCheckedKeys(false);// 2. 全部选中const nodeKeys [];function getAllKeys(data) {data.forEach(node {nodeKeys.push(node.id);if (node.children) {getAllKeys(node.children);}});}getAllKeys(treeData.value);treeRef.value.setCheckedKeys(nodeKeys, false)// 3. 将第一步获取的key节点设置为取消checked.forEach(val {treeRef.value.setChecked(val, false)})
}全部代码
templateel-treestylemax-width: 600px:datadata:propspropsshow-checkboxreftreeRef/el-button typeprimary clickhandleCheckChange获取选中数据/el-buttonel-button typeprimary clickall全选/el-buttonel-button typeprimary clickreverse反选/el-button
/templatescript setup
import { ref } from vue;
const treeRef ref(null)
const handleNodeClick (data) {console.log(data)
}const data [{label: Level one 1,children: [{label: Level two 1-1,children: [{label: Level three 1-1-1,},],},],},{label: Level one 2,children: [{label: Level two 2-1,children: [{label: Level three 2-1-1,},],},{label: Level two 2-2,children: [{label: Level three 2-2-1,},],},],},{label: Level one 3,children: [{label: Level two 3-1,children: [{label: Level three 3-1-1,},],},{label: Level two 3-2,children: [{label: Level three 3-2-1,},],},],},
]const props {children: children,label: label,
}
// 获取选中数据
const handleCheckChange () {// 方法一获取key此方法必须设置属性node-key!!!console.log(treeRef.value.getCheckedKeys(false))// 返回被选中的key也就是id// 方法二获取节点nodeconsole.log(treeRef.value.getCheckedNodes(false))// 返回被选中的对象
}// 用于判断是全选还是取消
let isAll false;
// 全选
const all () {if (isAll) {treeRef.value.setCheckedKeys([], false)isAll false} else {// 获取所以的id如果有一维数组则直接循环获取即可const nodeKeys [];function getAllKeys(data) {data.forEach(node {nodeKeys.push(node.id);if (node.children) {getAllKeys(node.children);}});}getAllKeys(treeData.value);treeRef.value.setCheckedKeys(nodeKeys, false)isAll true}
}// 反选
const reverse () {// 1. 获取当前选中的keylet checked treeRef.value.getCheckedKeys(false);// 2. 全部选中const nodeKeys [];function getAllKeys(data) {data.forEach(node {nodeKeys.push(node.id);if (node.children) {getAllKeys(node.children);}});}getAllKeys(treeData.value);treeRef.value.setCheckedKeys(nodeKeys, false)// 3. 将第一步获取的key节点设置为取消checked.forEach(val {treeRef.value.setChecked(val, false)})
}
/script
