el-tree 是 element-ui 提供的一个树形组件，可以在 Vue.js 应用中使用。el-tree 组件提供了 getCheckedNodes 方法，可以用来获取树形结构中被选中的节点。
<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>
- 本文标题： Vue3+Element-Plus中的Tree组件，多选时的赋值与取值
- 文章分类：【VueJS】
- 非特殊说明，本文版权归【胡同里的砖头】个人博客 所有，转载请注明出处.