vue实现穿梭框

页面展示

在这里插入图片描述

html

  <body>
    <div id="my">
      <div class="container-fluid">
        <div class="row">
          <!--左侧-->
          <div class="col-xs-5 col-sm-5">
            <div class="panel panel-success">
              <!--标题-->
              <div class="panel-heading clearfix">
                <span class="pull-right"></span>
              </div>
              <!--内容-->
              <div class="panel-body panel-height">
                <ul class="list-unstyled">
                  <li>
                    <div class="checkbox">
                      <label>
                        <input type="checkbox" />
                      </label>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <!--中间-->
          <div class="col-xs-2 col-sm-2 text-center">
            <div>
              <button type="button" class="btn btn-primary anniu">>></button>
            </div>
            <br />
            <div>
              <button type="button" class="btn btn-primary anniu"><<</button>
            </div>
          </div>
          <!--右侧-->
          <div class="col-xs-5 col-sm-5">
            <div class="panel panel-info">
              <!--标题-->
              <div class="panel-heading clearfix">
                <span class="pull-right"></span>
              </div>
              <!--内容-->
              <div class="panel-body panel-height">
                <ul class="list-unstyled">
                  <li>
                    <div class="checkbox">
                      <label>
                        <input type="checkbox" />
                      </label>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>

javascript

window.onload = function () {
  new Vue({
    el: "#my",
    data: {
      leftData:[
        {id:1,name:'数据1',check:true},
        {id:2,name:'数据2',check:false},
        {id:3,name:'数据3',check:false},
        {id:4,name:'数据4',check:false},
        {id:5,name:'数据5',check:false},
        {id:6,name:'数据6',check:false},
        {id:7,name:'数据7',check:false},
        {id:8,name:'数据8',check:false},
        {id:9,name:'数据9',check:false},
      ],
      rightData:[]//右侧数据
    },
    computed: {
      num() {
        return function(data,state) {
          return this.commonEvt(data,state).length
        }
      }
    },
    methods: {
      // 把左边的数据添加到右边
      toRight() {
        var arr = this.commonEvt(this.leftData,true);
        if(arr.length) {
          this.rightData = [...this.rightData,...arr]; 
          this.leftData = this.commonEvt(this.leftData,false); // 左边显示的数据
        } else {
          alert("请勾选数据")
        }
      },
      toLeft() {
        var arr = this.commonEvt(this.rightData,true)
        if(arr.length) {
          this.leftData = [...this.leftData,...arr]; // 左边显示添加的数据
          this.rightData = this.commonEvt(this.rightData,false); // 右边显示的数据
        } else {
          alert("请勾选数据")
        }
      },
      //  公共筛选方法
      commonEvt(data,state) {
        return data.filter(item => item.check == state)
      }
    },
    mounted() {

    }
  })
}

vue实现穿梭框

页面展示

html

javascript

推荐阅读更多精彩内容