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

在Vue3和Element-Plus中使用Tree组件实现多选时，你可以通过v-model绑定一个数组来获取所有选中的节点。以下是一个简单的例子：

<template>
  <el-tree
    :data="treeData"
    show-checkbox
    node-key="id"
    :props="defaultProps"
    v-model="checkedKeys"
  >
  </el-tree>
  <div>
    Selected Keys: {{ checkedKeys }}
  </div>
</template>
 
<script setup>
import { ref } from 'vue';
 
const treeData = ref([
  {
    id: 1,
    label: 'Node1',
    children: [
      {
        id: 2,
        label: 'Child1',
      },
      {
        id: 3,
        label: 'Child2',
      },
    ],
  },
  {
    id: 4,
    label: 'Node2',
    children: [
      {
        id: 5,
        label: 'Child2-1',
      },
      {
        id: 6,
        label: 'Child2-2',
      },
    ],
  },
]);
 
const defaultProps = {
  children: 'children',
  label: 'label',
};
 
const checkedKeys = ref([]);
</script>

在这个例子中，treeData是树组件的数据源，defaultProps定义了如何访问节点的子节点和标签，checkedKeys是绑定到Tree组件的v-model，它会自动保持所有选中节点的node-key值的数组。当用户在界面上选择或取消选择节点时，checkedKeys数组会自动更新。