Vue3+Element-Plus中的Tree组件，多选时的赋值与取值

小太阳〃

于 2023-03-02 12:21:25 发布

阅读量5.1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue.js elementui 前端

本文链接：https://blog.youkuaiyun.com/lmq2582609/article/details/129298370

vue 专栏收录该内容

4 篇文章

订阅专栏

文章介绍了在Vue.js应用中如何使用ElementUI的el-tree组件。通过设置`default-checked-keys`预选中节点，并利用`ref`和`getCheckedNodes`方法获取选中的树节点。示例代码展示了如何绑定数据，配置节点键以及自定义模板。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>