vue实现穿梭框功能

<template>
    <div id="app">
        <div class="main">
            <div class="left">
                <div class="container">
                    <div class="top">
                        <div class="one"><input type="checkbox" /></div>
                        <div class="two">控制器Id</div>
                        <div class="three">房间</div>
                    </div>
                    <ul class="list1">
                        <li v-for="(value, index) in Arr" :key="value.id">
                            <ul>
                                <li>
                                    <input
                                        type="checkbox"
                                        @click="select(value.id, index)"
                                    />
                                </li>
                                <li>{{ value.SN }}</li>
                                <li>{{ value.room }}</li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="center">
                <div class="choose">
                    <p>添加时段:</p>
                    <select id="selectValue" @change="changeSelect($event)">
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                    </select>
                </div>
                <div class="btn">
                    <div class="btn1" @click="changeLeft">&gt;&gt;</div>
                    <div class="btn2" @click="changeRight">&lt;&lt;</div>
                </div>
            </div>
            <div class="right">
                <div class="right-top">
                    <div class="right-box">
                        <div class="box"><input type="checkbox" /></div>
                        <div class="control">控制器Id</div>
                        <div class="time">时段</div>
                        <div class="room">房间</div>
                    </div>
                </div>
                <ul class="list2">
                    <li v-for="(value, index) in RightArr" :key="value.id">
                        <ul>
                            <li>
                                <input
                                    type="checkbox"
                                    @click="select2(value.id, index)"
                                />
                            </li>
                            <li>{{ value.SN }}</li>
                            <li>{{ value.time }}</li>
                            <li>{{ value.room }}</li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: "App",
    data() {
        return {
            Arr: [],
            RightArr: [],
            selectV: "1",
        };
    },
    created() {
        this.message();
    },
    methods: {
        async message() {
            // 发起get请求获取数据
            let { data } = await this.$http.get("/api/control.json");
            // 赋值给左侧数组
            this.Arr = data;
        },
        select(id, index) {
            this.Arr[index]["msg"]
                ? (this.Arr[index]["msg"] = 0)
                : (this.Arr[index]["msg"] = 1);
        },
        select2(id, index) {
            this.RightArr[index]["msg"] === 1
                ? (this.RightArr[index]["msg"] = 0)
                : (this.RightArr[index]["msg"] = 1);
        },
        changeSelect(e) {
            // 选中select标签的value值
            this.selectV = e.target.value;
        },
        changeLeft() {
            // forEach循环 检测数组成员是否有满足所需条件的
            this.Arr.forEach((item, index) => {
                if (item.msg) {
                    item.time = this.selectV;
                    // 追加数组元素
                    this.RightArr.push(item);
                    // 重新对RightArr进行升序排序
                    this.RightArr.sort(function (a, b) {
                        return a.id - b.id;
                    });
                }
            });
            // 过滤掉左侧满足条件的数组成员,并重新赋值给左侧数组
            this.Arr = this.Arr.filter((item) => item.msg !== 1);
        },
        changeRight() {
            // forEach循环 检测数组成员是否有满足所需条件的
            this.RightArr.forEach((item, index) => {
                if (item.msg == 0) {
                    // 追加数组元素
                    this.Arr.push(item);
                    // 重新对Arr进行升序排序
                    this.Arr.sort(function (a, b) {
                        return a.id - b.id;
                    });
                }
            });
            // 过滤掉右侧满足条件,并重新赋值给右侧数组
            this.RightArr = this.RightArr.filter((item) => item.msg !== 0);
        },
    },
};
</script>
<style>
* {
    margin: 0;
    padding: 0;
    list-style: none;
}
.main {
    display: flex;
    width: 1200px;
    height: 810px;
    background: skyblue;
    margin: 50px auto;
}
.left {
    width: 450px;
    height: 810px;
    background: #fff;
    border: 1px solid #ccc;
}
.left .container {
    display: flex;
    flex-direction: column;
    text-align: center;
    margin: 200px 15px 150px;
    border: 1px solid #ccc;
}
.left .container .top {
    display: flex;
    height: 50px;
    line-height: 50px;
    background: #ccc;
}
.left .container .top .one {
    width: 60px;
    border-right: 1px solid #fff;
}
.left .container .top .one input {
    width: 30px;
    height: 30px;
    margin-top: 10px;
}
.left .container .top .two {
    width: 160px;
    border-right: 1px solid #fff;
}
.left .container .top .three {
    flex: 1;
    border-right: 1px solid #fff;
}
.left .container .list1 {
    text-align: center;
}
.left .container .list1 li ul {
    display: flex;
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid #ccc;
}
.left .container .list1 li ul li:nth-child(1) {
    width: 60px;
    border-right: 1px solid #ccc;
}
.left .container .list1 li ul li:nth-child(1) input {
    width: 30px;
    height: 30px;
    margin-top: 10px;
}
.left .container .list1 li ul li:nth-child(2) {
    width: 160px;
    border-right: 1px solid #ccc;
}
.left .container .list1 li ul li:nth-child(3) {
    flex: 1;
    border-right: 1px solid #ccc;
}
.center {
    width: 230px;
    height: 810px;
    background: #ccc;
    text-align: center;
}
.center .choose {
    width: 230px;
    height: 80px;
    margin-top: 130px;
}
.center .choose p {
    text-align: left;
    margin-left: 10px;
}
.center .choose #selectValue {
    width: 210px;
    margin: 0 auto;
}
.center .btn {
    width: 100px;
    margin: 50px auto;
    line-height: 50px;
}
.center .btn .btn1 {
    height: 50px;
    margin-bottom: 30px;
    background: #fff;
}
.center .btn .btn2 {
    height: 50px;
    background: #fff;
}
.right {
    flex: 1;
    background: #fff;
    text-align: center;
}
.right .right-top {
    margin-top: 190px;
    margin-left: 15px;
}
.right .right-top .right-box {
    display: flex;
    height: 60px;
    line-height: 50px;
    border: 1px solid #ccc;
    background: #ccc;
}
.right .right-top .right-box .box {
    width: 60px;
    border-right: 1px solid #fff;
}
.right .right-top .right-box .box input {
    width: 30px;
    height: 30px;
    margin-top: 15px;
}
.right .right-top .right-box .control {
    width: 120px;
    border-right: 1px solid #fff;
}
.right .right-top .right-box .time {
    width: 120px;
    border-right: 1px solid #fff;
}
.right .right-top .right-box .room {
    flex: 1;
}
.right .list2 {
    text-align: center;
    margin-left: 15px;
    border: 1px solid #ccc;
    border-top: 0;
}
.right .list2 li ul {
    display: flex;
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid #ccc;
}
.right .list2 li ul li:nth-child(1) {
    width: 60px;
    border-right: 1px solid #ccc;
}
.right .list2 li ul li:nth-child(1) input {
    width: 30px;
    height: 30px;
    margin-top: 10px;
}
.right .list2 li ul li:nth-child(2) {
    width: 120px;
    border-right: 1px solid #ccc;
}
.right .list2 li ul li:nth-child(3) {
    width: 120px;
    border-right: 1px solid #ccc;
}
.right .list2 li ul li:nth-child(4) {
    flex: 1;
}
</style>

总结：
1.复选框click事件传递对应的索引值，并根据判断添加属性值和改变属性值

（@click="事件名（index）"）

2.select标签change事件传递$event",获取选中时候的值复制给在data数据中的变量

@change="事件名（$event)"

3.点击穿梭功能：
左按钮点击，先循环左数组，紧接判断左数组成员是否有满足复选框属性的值的，然后满足条 件的 追加到右侧数组，然后对右侧数组进行升序排序。
右按钮点击：同理。