穿梭框单选demo · 武功秘籍大全

~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"> <title>穿梭框单选demo</title> <link href="https://cdn.staticfile.org/element-ui/2.12.0/theme-chalk/index.css" rel="stylesheet"> <script src="https://cdn.staticfile.org/vue/2.6.10/vue.min.js"></script> <script src="https://cdn.staticfile.org/element-ui/2.12.0/index.js"></script> <style> .ul-left { list-style: none; } .ul-left li { line-height: 30px; } .ul-left li:hover { background: red; } .pull-left li:active{ background: blue; } </style> </head> <body> <div id="app"> <el-card shadow="always"> <el-select v-model="value1" placeholder="请选择"> <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select> </el-card> <div style="display: flex"> <el-card shadow="always"> <ul class="ul-left"> <li @click="leftClick(index,item.name)" v-for="(item,index) in options2" :key="index" v-show="!item.selected">{{item.name}} </li> </ul> </el-card> <el-card shadow="always"> <ul class="ul-left"> <li @click="pushRight">>>>>>></li> <li @click="pushLeft"><<<<<<</li> </ul> </el-card> <el-card shadow="always"> <ul class="ul-left"> <li @click="rightClick(index)" v-for="(item,index) in options3">{{item.name}}</li> </ul> </el-card> </div> </div> <script> var app = new Vue({ el: '#app', data: { options1: [ { value: 'one', label: '选项1', children: [ { index: '1', selected: false, name: '选项1参数1' }, { index: '2', name: '选项1参数2' }, { index: '3', selected: false, name: '选项1参数3' }, { index: '4', selected: false, name: '选项1参数4' }, ] }, { value: 'two', label: '选项2', children: [ { index: '1', selected: false, name: '选项2参数1' }, { index: '2', selected: false, name: '选项2参数2' }, { index: '3', selected: false, name: '选项2参数3' }, { index: '4', selected: false, name: '选项2参数4' }, { index: '5', selected: false, name: '选项2参数5' }, ] }, { value: 'three', label: '选项3', children: [ { index: '1', selected: false, name: '选项3参数1' }, { index: '2', selected: false, name: '选项3参数2' }, { index: '3', selected: false, name: '选项3参数3' }, { index: '4', selected: false, name: '选项3参数4' }, { index: '5', selected: false, name: '选项3参数5' }, { index: '6', selected: false, name: '选项3参数6' }, ] }, ], options2: [], options3: [], value1: '', tempList: [], index1: '0' }, watch: { value1() { this.options1.forEach((obj, index) => { if (this.value1 == obj.value) { this.options2 = obj.children return } }) } }, methods: { leftClick(index, name) { this.tempList = { optionsIndex: this.value1, index: index, name: name } }, rightClick(index) { this.index1 = index this.value1 = this.options3[index].optionsIndex }, pushLeft() { this.options3.splice(this.index1, 1) this.options2.forEach((obj, index) => { obj.selected = false }) }, pushRight() { if (this.options3.length == 0) { this.options3.push(this.tempList) } else { let flag = false for (let i = 0; i < this.options3.length; i++) { if (this.options3[i].optionsIndex == this.tempList.optionsIndex) { this.options3[i].index = this.tempList.index this.options3[i].name = this.tempList.name flag = false break } else { flag = true } } if (flag) { this.options3.push(this.tempList) } } this.options2.forEach((obj, index) => { if (index == this.tempList.index) { obj.selected = true } else { obj.selected = false } }) } } }) </script> </body> </html> ~~~ 效果图如下: ![](https://img.kancloud.cn/c2/bc/c2bc5cb6c3db8c766c296c4945d4a5c0_598x317.gif)