vue3不使用lang=ts如何使用elementPlus组件 el-tree 中的setcheckedkeys

在Vue 3中使用Element Plus的el-tree组件，可以通过以下步骤来设置checkedKeys：

1. 安装Element Plus和Vue 3：

npm install element-plus@next
npm install vue@next

2. 在Vue 3项目的入口文件（通常是main.js或者main.ts）中导入Element Plus的样式和组件：

import { createApp } from 'vue';
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';

const app = createApp(App);
app.use(ElementPlus);
app.mount('#app');

3. 在组件中使用el-tree，并创建一个ref来引用el-tree实例：

<template>
  <el-tree
    :data="treeData"
    :props="treeProps"
    @check-change="handleCheckChange"
    ref="tree"
  ></el-tree>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const treeRef = ref(null);

    // 树的数据
    const treeData = [
      // 数据项
    ];

    // 树的props配置
    const treeProps = {
      // props配置项
    };

    // 处理check-change事件
    const handleCheckChange = (checkedKeys) => {
      console.log(checkedKeys);
    };

    // 设置checkedKeys
    const setCheckedKeys = (keys) => {
      treeRef.value.setCheckedKeys(keys);
    };

    return {
      treeData,
      treeProps,
      handleCheckChange,
      setCheckedKeys,
      treeRef,
    };
  },
};
</script>

上述代码中，使用了Vue 3的Composition API来创建组件。在setup函数中，通过ref函数创建了一个treeRef引用，用于引用el-tree实例。在setCheckedKeys函数中，通过treeRef.value.setCheckedKeys方法来设置checkedKeys。

在Vue 3中，不需要使用lang="ts"来使用TypeScript，可以直接使用JavaScript编写Vue 3的代码。但是，如果你想要使用TypeScript来获得更好的类型检查和自动补全功能，可以将代码保存为.tsx文件，并设置lang="tsx"