html搭建结构
<el-tree ref="treeRef" :data="data" show-checkbox :default-expand-all="false" node-key="id" highlight-current
:props="defaultProps" @check="handleCheckChange" />js文章来源：https://www.toymoban.com/news/detail-845536.html
// 编辑按钮
let Jedit = (row: any) => {
console.log(row);
dialogFormVisible.value = true
adds.value = false
edits.value = true
charnam.value = row.name
RoleType.value = row.type == 1 ? '超管' : row.type == 2 ? "劳务公司" : row.type == 3 ? "项目部" : "审核员"
Mid.value = row.menus
row.value = row.menus
//数据回显，row.menus_id就是接口返回选中的树节点id集合
//菜单树数据
menuVos.value = row.menus
//数据回显操作
nextTick(() => {
const arr: any = []
row.menus_id.forEach((item: any) => {
if (
!treeRef.value?.getNode(item).childNodes ||
!treeRef.value?.getNode(item).childNodes.length
) {
arr.push(item)
}
})
roleForm.menuIds = arr
treeRef.value?.setCheckedKeys(arr)
})
};const menuVos = ref([]) //菜单树列表
const roleForm: any = reactive({})
function handleCheckChange(data1: any, data2: any) {
// 选中的子节点
const checkedKeys = data2.checkedKeys
// 选中的父节点
const halfCheckedKeys = data2.halfCheckedKeys
checkMenuList.value = [...checkedKeys, ...halfCheckedKeys]
}非常好用，拿过来修改一下check事件，ref获取就直接可以使用了 文章来源地址https://www.toymoban.com/news/detail-845536.html
到了这里，关于vue3使用element-plus 树组件（el-tree）数据回显的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
![[Vue3 博物馆管理系统] 使用Vue3、Element-plus tabs组件构建选项卡功能](https://imgs.yssmx.com/Uploads/2024/02/703298-1.png)
