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

vue 1 年前 0 1

本文介绍: el–tree 是 element–ui 提供的一个树形组件，可以在 Vue.js 应用中使用。el–tree 组件提供了 getCh ec k e dNo des 方法，可以用来获取树形结构中被选中的节点。

el-t re e 是 element–ui 提供的一个树形组件，可以在 Vue.js 应用中使用。el-t ree 组件提供了 getCh ec kedNo des 方法，可以用来获取树形结构中被选中的节点。

&lt;el-tree 
    empty-text="无数据"
    :props="{
        label: 'name',
        value: 'permId'
    }"
    node-key="permId"
    :data="permList"
    ref="permListRef"
    :default-checked-keys="defaultPermTreeSelect"
    show-checkbox
&gt;
    &lt;template #default="{ node, data }"&gt;
        <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>