vue3+ts 勾选左侧tree，点击按钮，将他添加到右侧tree的选中节点下

在Vue3配合TypeScript的项目中，如果你想要实现的功能是用户勾选左侧的树形结构元素，点击按钮将其添加到右侧树的选定节点下，可以按照以下步骤来设计：

首先，你需要定义一个数据模型，比如`TreeNode`，包含节点的id、text、children属性以及一个表示是否被选中的布尔值：

interface TreeNode {
  id: string;
  text: string;
  children: TreeNode[];
  isSelected?: boolean;
}

接着，在你的组件中，你可以维护两个状态，一个用于左侧树，一个用于右侧树：

import { ref } from 'vue';
export default {
  data() {
    return {
      leftTree: [] as TreeNode[], // 左侧树的数据
      rightTree: [] as TreeNode[], // 右侧树的数据
      selectedNodeRight: ref<TreeNode | null>(null), // 保存右侧已选中的节点
    };
  },
  methods: {
    toggleLeftNode(node: TreeNode) {
      node.isSelected = !node.isSelected;
    },
    addToLeftRight(node: TreeNode) {
      if (this.selectedNodeRight.value) {
        this.leftTree.push(node);
        this.selectedNodeRight.value.children.push(node);
        this.selectedNodeRight.value.isSelected = false; // 清空右侧选择
      }
    },
  },
};

然后在模板部分，展示这两个树，并处理勾选和按钮点击事件：

<template>
  <div>
    <ul v-for="(leftNode, index) in leftTree" :key="index">
      <li @click="toggleLeftNode(leftNode)">
        {{ leftNode.text }}
        <input type="checkbox" :checked="leftNode.isSelected" />
      </li>
    </ul>

    <button @click="selectedNodeRight.value && addToLeftRight(selectedNodeRight)">添加到右侧</button>

    <ul v-if="selectedNodeRight.value" :key="selectedNodeRight.value.id">
      <li v-for="(rightChild, childIndex) in selectedNodeRight.value.children" :key="childIndex">
        {{ rightChild.text }}
      </li>
    </ul>
  </div>
</template>

当你勾选左侧节点并点击“添加到右侧”按钮时，它会被添加到右侧当前选中的节点下。如果右侧没有选中节点，则会在底部新建一个子节点。