制作Element Plus 穿梭框

最新推荐文章于 2024-08-09 14:41:31 发布

情天娃娃——

最新推荐文章于 2024-08-09 14:41:31 发布

阅读量808

点赞数 1

文章标签： servlet java html

本文链接：https://blog.csdn.net/m0_59783017/article/details/127263151

版权

本文档详细介绍了如何利用Element Plus库创建一个功能完备的穿梭框组件，涵盖了从HTML结构设计，JavaScript交互实现，到CSS样式定制的全过程。

摘要由CSDN通过智能技术生成

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()}}/{<