制作Element Plus 穿梭框_elementplus穿梭框

 Html代码

  <div class="box">
    <!-- 左边盒子 -->
    <div class="left-box">
      <div class="left-top">
        <input type="checkbox" class="whole" v-model="leftCheckAll" @change="leftAll()">&nbsp;List 1<span
          class="left-span">{
  {num()}}/{
  {leftData.length}}</span>
      </div>
      <div class="dataUl">
        <ul v-for="jsonList in leftData">
          <li>
            <input type="checkbox" v-model="jsonList.check" :disabled="jsonList.disabled" @change="curCheckChange()">{
  {
            jsonList.name }}
          </li>
        </ul>
      </div>
    </div>
    <!-- 穿梭到左边的按钮 -->
    <button @click="goLeft()" class="btn" id="leftBtn">&lt;</button>
    <!-- 穿梭到右边的按钮 -->
    <button @click="goRight()" class="btn" id="rightBtn">&gt;</button>
    <!-- 右边盒子 -->
    <div class="right-box">
      <div class="right-top">
        <input type="checkbox" class="whole" v-model="rightCheckAll" @change="rightAll()">&nbsp;List 2<span
          class="right-span">{
  {num1()}}/{<