vue3项目封装支持搜索，选中不可选，选中的数据项支持上下移动，删除的上下穿梭的树状穿梭框

 1，vue3代码

// 这个是返回的所有的数据
    const sourceItems = ref([])
    // 这是穿梭到下面的数据
    const targetItems = ref([])
    // 这是搜索字段
    const searchName = ref('')
    // 这两个要是后端返回，可不写
    const expanded = ref(false)
    const selected = ref(false)

  watch(sourceItems, (newVal,oldVal)=> {
    newVal.forEach((item)=>{
      if (!item.expanded && !item.selected) {
        item.expanded = expanded.value
        item.selected = selected.value
      }
      sourceItems.value = newVal
    })
  })
  // 搜索
  const searchFn = () => {
      updateItemsVisibility(sourceItems.value);
  };
  // 清除搜索框里面的值
  const clearSearch = () => {
        searchName.value = ''
  }
  const updateItemsVisibility = (items) => {
      for (const item of items) {
        const isShown = item.messageName.toLowerCase().includes(searchName.value.toLowerCase());
        item.isShown = isShown;
        if (item.children) {
          updateItemsVisibility(item.children);
          if (item.children.some((child) => child.isShown)) {
            item.expanded = true;
          } else {
            item.expanded = false;
          }
        }
      }
  }
  const moveToTarget = (item) => {
      // 将 item 从 sourceItems 移动到 targetItems
      sourceItems.value = sourceItems.value.filter((el) => el.id !== item.id);
      item.selected = false; // 取消选中状态
      targetItems.value.push(item);
  }
  const moveToSource = (item) => {
      // 将 item 从 targetItems 移动到 sourceItems
      targetItems.value = targetItems.value.filter((el) => el.id !== item.id);
      // 在 sourceItems 中查找 item 的父级，并将 item 添加到找到的父级的 children 中
      const parent = findParentItem(item, sourceItems.value);
      if (parent) {
        parent.children.push(item);
      } else {
        sourceItems.value.push(item);
      }
  }
  const findParentItem = (item, items) => {
      // 递归查找 item 的父级
      for (let i = 0; i < items.length; i++) {
        const currentItem = items[i];
        if (currentItem.children && currentItem.children.some((el) => el.id === item.id)) {
          return currentItem;
        } else if (currentItem.children) {
          const parent = findParentItem(item, currentItem.children);
          if (parent) return parent;
        }
      }
      return null;
  }
  const isChecked = (item) => {
      return item.selected;
  }
  const toggleSelection = (item) => {
      item.selected = !item.selected;
      if (item.selected) {
        item.expanded = false; // 选中状态下，不展开子项
      }
  }
  // 上移
  const moveUp = (index) => {
      if (index > 0 ) {
        [targetItems.value[index - 1], targetItems.value[index]] = [
          targetItems.value[index],
          targetItems.value[index - 1],
        ];
      }
  }
  // 下移
  const moveDown = (index) => {
      if (index < targetItems.value.length - 1) {
        [targetItems.value[index], targetItems.value[index + 1]] = [
          targetItems.value[index + 1],
          targetItems.value[index],
        ];
      }
  }
  // 删除
  const removeItem = (index) => {
      targetItems.value.splice(index, 1);
  }
  // 取消
  const cancel = () => {
    console.log('取消')
    open.value = false
  }
  // 确定
  const confirm = () => {
    let targetItemObj={}
    sourceItems.value.forEach(item=>{
      let targetItemArr=[]
      targetItems.value.forEach(it=>{
        if (item.children.length && it.parentId == item.id) {
          targetItemArr.push(it.messageCode)
        }
      })
      let iten=item.messageCode
      targetItemObj[iten]=targetItemArr
    })
    let oldObj ={
      trend:targetItemObj
   }
    let obj={}
    let arr=Object.keys(oldObj.trend)
    arr.forEach(item=>{
        if(oldObj.trend[item].length>0){
            obj[item]=oldObj.trend[item]
        }
    })
    emit('confirm',obj)
    cancel();
  };

 template代码

<template>
 <DrawerBox
       v-model:open="open"
       title="可选择输入数据信息"
       width='448px'
      >
    <!--
      可选择输入数据信息
    -->
    <Form>
        <div class="transfer-view">
          <div class="checked-box">
            <div class="search-box">
              <Input
                v-model:value="searchName"
                placeholder="请输入"
                @input="searchFn"
                style="width:288px"
              >
              <template #prefix>
                <SearchOutlined style="color:#D8D8D8"/>
              </template>
               <template #suffix>
                <CloseCircleOutlined @click="clearSearch"/>
              </template>
              </Input>
              <div @click="searchFn" class="inquire">查询</div>
            </div>
             <ul style="marginLeft:-25px">
              <li v-for="item in sourceItems" :key="item.id" style="list-style:none">
                <span @click="item.expanded = !item.expanded" :class="{ expanded: item.expanded }">
                  <input
                    type="checkbox"
                    :checked="isChecked(item)"
                    @change="toggleSelection(item)"
                    :disabled="item.selected"
                  >
                  {{ item.messageName }}
                </span>
                <ul v-show="item.expanded">
                  <template v-for="child in item.children" :key="child.id">
                    <li style="list-style:none">
                      <input
                        type="checkbox"
                        :checked="isChecked(child)"
                        @change="toggleSelection(child)"
                        :disabled="child.selected"
                        @click="moveToTarget(child)"
                      >
                      {{ child.messageName }}
                    </li>
                    <li v-for="subChild in child.children" :key="subChild.id" style="list-style:none">
                      <input
                        type="checkbox"
                        :checked="isChecked(subChild)"
                        @change="toggleSelection(subChild)"
                        :disabled="subChild.selected"
                        @click="moveToTarget(subChild)"
                      >
                      {{ subChild.messageName }}
                    </li>
                  </template>
                </ul>
              </li>
            </ul>
          </div>
          <div class="title">已选择验证数据信息</div>
          <div class="select-checked-box">
            <div class="search-box">
              <span class="selected">已选：{{ targetItems.length }}个</span>
            </div>
            <ul style="marginLeft:-25px">
              <li v-for="(item, index) in targetItems" :key="item.id" style="list-style:none">
                <div @click="item.expanded = !item.expanded" class="selected">
                  <div>
                    <input type="checkbox" :checked="isChecked(item)" @change="toggleSelection(item)" :disabled="item.selected"/>
                    {{ item.messageName }}
                  </div>
                  <div class="operate">
                    <UpSquareOutlined @click="moveUp(index)" v-if="index !== 0" class="activate"></UpSquareOutlined>
                    <UpSquareOutlined v-else />
                    <DownSquareOutlined @click="moveDown(index)" v-if="index !== targetItems.length - 1" class="activate"></DownSquareOutlined>
                    <DownSquareOutlined v-else />
                    <DeleteOutlined @click="removeItem(index)" class="delete activate"></DeleteOutlined>
                  </div>
                </div>
                <ul v-show="item.expanded">
                  <template v-for="child in item.children" :key="child.id">
                    <li style="list-style:none">
                      <input type="checkbox" :checked="isChecked(child)" @change="toggleSelection(child)" :disabled="child.selected"/>
                      {{ child.messageName }}
                    </li>
                    <li v-for="subChild in child.children" :key="subChild.id" style="list-style:none">
                      <input type="checkbox" :checked="isChecked(subChild)" @change="toggleSelection(subChild)" :disabled="subChild.selected"/>
                      {{ subChild.messageName }}
                    </li>
                  </template>
                </ul>
              </li>
            </ul>
          </div>
        </div>
      </Form>
    <template #footer>
      <Button type="primary" @click="confirm">确定</Button>
      <Button style="margin-left:12px;" @click="cancel">取消</Button>
    </template>
  </DrawerBox>
</template>

css代码

<style lang="less" scoped>
.transfer-view {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  .checked-box,
  .select-checked-box {
    width: 400px;
    border: 1px solid #eeeeee;
    border-radius: 4px;
    padding: 1.31rem;
    box-sizing: border-box;
  }
  .select-checked-box {
    min-height: 152px;
  }
  .selected{
    display: flex;
    justify-content: space-between;
    button{
      margin: 5px;
    }
  }
  .title{
    height: 40px;
    width: 100%;
    background: #F5F6FB;
    padding: 14px 0 14px 24px;
    font-size: 14px;
  }
  .search-box {
    font-family: Source Han Sans CN;
    font-weight: 400;
    display: flex;
    height: 2.4rem;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 0.8rem;
    .selected {
      color: #888ea2;
    }
    .inquire{
        color: #0058FB;
        cursor: pointer;
    }
  }
  .checked-box {
    min-height: 600px;
  }
  .item-label {
    width: 60px;
    margin-right: 12px;
    height: 100%;
    text-align: right;
    font-weight: 400;
  }
  .operate {
      font-size: 16px;
      margin-left: 40px;
      color: #D0CFE0;
      cursor: not-allowed;

      .activate {
        color: #0859FE;
        cursor: pointer;

        &.delete {
          color: #B30000;
        }
      }

      & > span {
        margin-right: 8px;

        &:last-child {
          margin-right: 0;
        }
      }
  }
}
</style>