el-tree 是 element-ui 提供的一个树形组件，可以在 Vue.js 应用中使用。el-tree 组件提供了 getCheckedNodes 方法，可以用来获取树形结构中被选中的节点。文章来源地址https://www.toymoban.com/news/detail-627837.html
<el-tree
empty-text="无数据"
:props="{
label: 'name',
value: 'permId'
}"
node-key="permId"
:data="permList"
ref="permListRef"
:default-checked-keys="defaultPermTreeSelect"
show-checkbox
>
<template #default="{ node, data }">
<span class="custom-tree-node">
<el-tag :type="data.type == 0 ? '' : 'warning'">{{ data.typeText }}</el-tag>
<span class="ml-2">{{ node.label }}</span>
</span>
</template>
</el-tree>
<script setup>
//树 默认选中
const defaultPermTreeSelect = ref([])
//树 ref
const permListRef = ref(null)
//树 数据
const permList = ref([])
//赋值时，使用了:default-checked-keys，给defaultPermTreeSelect赋值
如（vue3中ref是给value赋值）：defaultPermTreeSelect.value = ['1', '2']
数组中的元素是node-key指定的唯一标识字段的值。
//取值时，使用permListRef来调用getCheckedNodes()
如：const permNodes = permListRef.value.getCheckedNodes()
</script>
文章来源：https://www.toymoban.com/news/detail-627837.html
到了这里，关于Vue3+Element-Plus中的Tree组件，多选时的赋值与取值的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
![[Vue3 博物馆管理系统] 使用Vue3、Element-plus tabs组件构建选项卡功能](https://imgs.yssmx.com/Uploads/2024/02/703298-1.png)
