实现左边可搜索可选择展开树tree，右边已选列表可移除联动显示

<template>
  <basic-container>
    <el-row>
      <el-col :span="4">
        <el-input
            placeholder="输入关键字进行过滤"
            v-model="filterText"
            style="width: 200px"
        ></el-input>

        <el-tree
            show-checkbox
            class="filter-tree"
            :data="data"
            :props="defaultProps"
            default-expand-all
            :filter-node-method="filterNode"
            @check="handleCheack"
            ref="treeRef"
        ></el-tree>
      </el-col>
      <el-col :span="3">
        <div class="selected-list">
          <h3>已选择列表</h3>
          <ul>
            <li v-for="selectedItem in selectedItems" :key="selectedItem.id">
              {{ selectedItem.label }}
              <span @click="removeSelected(selectedItem)">—</span>
            </li>
          </ul>
        </div>
      </el-col>
    </el-row>
  </basic-container>
</template>

<script>
import  {ref,reactive,watch, computed } from "vue";

export default {
  setup() {
    const filterText = ref('');

    const data = ref([
      {
        id: 1,
        label: '一级 1',
        children: [
          {
            id: 4,
            label: '二级 1-1',
            children: [
              {
                id: 9,
                label: '三级 1-1-1',
              },
              {
                id: 10,
                label: '三级 1-1-2',
              },
            ],
          },
        ],
      },
      {
        id: 2,
        label: '一级 2',
        children: [
          {
            id: 5,
            label: '二级 2-1',
          },
          {
            id: 6,
            label: '二级 2-2',
          },
        ],
      },
      {
        id: 3,
        label: '一级 3',
        children: [
          {
            id: 7,
            label: '二级 3-1',
          },
          {
            id: 8,
            label: '二级 3-2',
          },
        ],
      },
    ]);
    const treeRef = ref(null);
    const defaultProps = {
      children: 'children',
      label: 'label',
    };
    const selectedItems = ref([])
    const filterNode = (value, dataItem) => {
      if (!value) return true;
      return dataItem.label.indexOf(value) !== -1;
    };
    const removeSelected = (item) =>{
        let index = selectedItems.value.indexOf(item);
        if (index > -1) selectedItems.value.splice(index,1)
        treeRef.value.setChecked(item,false); //设置item为不可见
    }
    const handleCheack = ()=>{
      showCheckedNodes();
    }
    watch(filterText, (val) => {
        treeRef.value.filter(val);
    });

    const showCheckedNodes = () => {
        const checkedNodes = treeRef.value.getCheckedNodes(true);
        console.log('Checked Nodes:', checkedNodes);
        selectedItems.value = checkedNodes;
    };

    return {
      filterText,
      data,
      defaultProps,
      filterNode,
      removeSelected,
      handleCheack,
      treeRef,
      selectedItems
    };
  }}
</script>

<style></style>