vue3 组件之穿梭框2.0

如图所示，没有传统穿梭框中间的箭头，操作更加方便，左侧选择后进入到右侧，并且可以对右侧所选项进行删除，从而左侧勾选也会对应取消。并且带搜索框。

代码如下：

（涉及到深拷贝的一些知识）

<template>
  <div style="display: inline-block">
    
    <el-select
      class="search-input"
      v-model="peopleVal"
      placeholder="请选择"
      ref="selectPeople"
      @focus="openDialog"
    >
    el-select>
    
    <el-dialog v-model="dialog" :title="title" @open="openFn" width="630px">
      <el-form label-width="70px">
        <div class="transfer-view">
          <div class="item-label">选择人员div>
          <div class="checked-box">
            <div class="search-box">
              <el-input
                v-model.trim="searchName"
                placeholder="请输入关键词"
                :prefix-icon="Search"
                @input="searchFn"
                clearable
              >el-input>
            div>

            <el-checkbox
              v-show="!searchName"
              :indeterminate="isIndeterminate"
              v-model="checkAll"
              @change="handleCheckAllChange"
              >全选el-checkbox
            >
            <el-checkbox-group @change="handleChecked" v-model="checkList">
              <el-checkbox
                class="checkbox-item"
                v-for="v in personList"
                :label="v.id"
                :key="v.id"
              >
                {{ v.realName }}
              el-checkbox>
            el-checkbox-group>
          div>
          <div class="select-checked-box">
            <div class="search-box">
              <span class="selected">已选：{{ checkList.length }}人span>
            div>
            <div class="select-perosn" v-for="v in checkPerson" :key="v.id">
              <span>
                {{ v.realName }}
              span>
              <i
                class="iconfont icon-a-zujian18719 icon-error"
                @click="handleRemove(v)"
              >i>
            div>
          div>
        div>
      el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialog = false">取消el-button>
          <el-button type="primary" @click="submitFn">提交el-button>
        span>
      template>
    el-dialog>
  div>
template>