Vue 3 Element Plus el-tree 组件设置 checkedKeys (无需 lang="ts")

<p>在 Vue 3 中使用 Element Plus 的 el-tree 组件，可以通过以下步骤来设置 checkedKeys：</p>
<ol>
  <li>安装 Element Plus 和 Vue 3：</li>
  <pre><code>npm install element-plus@next
npm install vue@next</code></pre>
  <li>在 Vue 3 项目的入口文件（通常是 main.js 或者 main.ts）中导入 Element Plus 的样式和组件：</li>
  <pre><code>import { createApp } from 'vue';
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';
<p>const app = createApp(App);
app.use(ElementPlus);
app.mount('#app');</code></pre></p>
  <li>在组件中使用 el-tree，并创建一个 ref 来引用 el-tree 实例：</li>
  <pre><code><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></code></pre>
  <p>上述代码中，使用了 Vue 3 的 Composition API 来创建组件。在 setup 函数中，通过 ref 函数创建了一个 treeRef 引用，用于引用 el-tree 实例。在 setCheckedKeys 函数中，通过 treeRef.value.setCheckedKeys 方法来设置 checkedKeys。</p>
  <p>在 Vue 3 中，不需要使用&#x27;lang="ts"&#x27; 来使用 TypeScript，可以直接使用 JavaScript 编写 Vue 3 的代码。但是，如果你想要使用 TypeScript 来获得更好的类型检查和自动补全功能，可以将代码保存为 .tsx 文件，并设置&#x27;lang="tsx"&#x27;。</p>
</ol>