vue3+element Plus 清空el-tree复选框选中项

在Vue 3和Element Plus中，清空el-tree组件的复选框选中项可以通过设置其data属性中的checkedKeys为空数组来实现。以下是一个简单的示例：

<template>
  <el-tree
    :data="treeData"
    show-checkbox
    :default-checked-keys="defaultCheckedKeys"
    node-key="id"
    ref="treeRef"
  >
  </el-tree>
  <el-button @click="clearChecked">清空选中</el-button>
</template>
 
<script setup>
import { ref } from 'vue';
import { ElTree, ElButton } from 'element-plus';
 
const treeRef = ref(null);
const defaultCheckedKeys = ref([]);
const treeData = ref([
  {
    id: 1,
    label: '节点1',
    children: [
      {
        id: 2,
        label: '节点1-1',
      },
      {
        id: 3,
        label: '节点1-2',
      },
    ],
  },
  // ...更多节点数据
]);
 
const clearChecked = () => {
  treeRef.value.checkedKeys = [];
};
</script>

在这个示例中，el-tree组件通过:data属性绑定树形数据，并通过show-checkbox属性开启复选框功能。defaultCheckedKeys属性用于设置默认选中的节点ID数组。ref="treeRef"为树形控件创建了一个引用，以便在Vue组件的逻辑中访问和修改它的属性。

clearChecked函数通过treeRef.value访问el-tree组件的实例，并将其checkedKeys属性设置为一个空数组，从而清空所有选中的复选框。

请注意，这个示例假设你已经正确安装并配置了Element Plus和Vue 3。