Vue关于element穿梭框进行的修改成table表格穿梭框方式
更新时间:2024年04月18日 10:08:12 作者:像牛奶却不是牛奶
这篇文章主要介绍了Vue关于element穿梭框进行的修改成table表格穿梭框方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
关于element穿梭框进行的修改成table表格穿梭框
直接先看样式图
<!--弹出层 --> <el-dialog title="标题" :visible.sync="introductionVisible" width="70%"> <el-form :model="introductionForm" label-width="100px"> <el-row style="display:flex;justify-content:space-around"> <el-col :span="10" style="border:1px solid #EBEEF5"> <span style="display:block;font-size:16px;text-align:center;padding:10px;border-bottom:1px solid #EBEEF5;margin-bottom:10px">请选择</span> <el-col :span="16"> <el-form-item label="姓名"> <el-input size="mini" v-model="studentName" :style="{width: '120px'}"></el-input> </el-form-item> </el-col> <el-col :span="24" style="margin-right:10px" > <el-form-item label="所属单位"> <select-builder table="org" v-model="orgId" :style="{width: '120px'}"></select-builder> *[HTML]:自己封装的组件,没有的话也可以用input <el-radio-group v-model="search_range"> <el-radio :label="0" style="margin-left: 10px; margin-right:10px;">本级</el-radio> <el-radio :label="1">全部</el-radio> </el-radio-group> </el-form-item> </el-col> <el-col :span="24" style="display:flex;justify-content:space-around;margin:-10px 0 10px 0"> <el-button type="primary" size="mini">查询</el-button> </el-col> <el-table :data="data1" border ref="selection" @selection-change="checkAll" style="width: 100%"> <el-table-column type="selection" width="30"> </el-table-column> <el-table-column prop="name" label="人员姓名" > </el-table-column> <el-table-column prop="date" label="机构路径" ></el-table-column> </el-table> </el-col> <el-col :span="2" style="display:flex;flex-direction:column;justify-content:center"> <el-button icon="el-icon-d-arrow-right" :disabled="nowSelectData.length?false:true" size="mini" type="primary" @click="handelSelect"></el-button> <el-button icon="el-icon-d-arrow-left" :disabled="nowSelectRightData.length?false:true" size="mini" type="primary" @click="handleRemoveSelect" style="margin-top:10px;margin-left:0px;"></el-button> </el-col> <el-col :span="10" style="border:1px solid #EBEEF5;min-height:460px"> <span style="display:block;font-size:16px;text-align:center;padding:10px;border-bottom:1px solid #EBEEF5;margin-bottom:10px">已选择</span> <el-table :data="selectArr" border ref="selection" @selection-change="checkRightAll" style="width: 100%"> <el-table-column type="selection" width="30"></el-table-column> <el-table-column prop="name" label="人员姓名"></el-table-column> <el-table-column prop="date" label="机构路径"></el-table-column> </el-table> </el-col> </el-row> </el-form> <div slot="footer" class="dialog-footer"> <el-button @click="introductionVisible = false">取 消</el-button> <el-button type="primary" @click="introductionVisible = false">确 定</el-button> </div> </el-dialog>
- js
<script> export default { data() { return { studentName:'', orgId:'', search_range:'', selectArr:[], // 右边列表 options: [], value: '', data1:[{ date: '11000KV-三站1', name: '王小虎1', }, { date: '11000KV-三站2', name: '王小虎2', }, { date: '11000KV-三站3', name: '王小虎3', }, { date: '11000KV-三站4', name: '王小虎4', }, { date: '11000KV-三站5', name: '王小虎5', }, { date: '11000KV-三站6', name: '王小虎6', }, { date: '11000KV-三站7', name: '王小虎7', }], nowSelectData: [], // 左边选中列表数据 nowSelectRightData: [], // 右边选中列表数据 }; }, methods: { checkAll(val){ this.nowSelectData = val; }, checkRightAll(val) { this.nowSelectRightData = val; }, // 选中 handelSelect(){ this.selectArr = this.handleConcatArr(this.selectArr, this.nowSelectData) this.handleRemoveTabList(this.nowSelectData, this.data1); this.nowSelectData = []; }, // 取消 handleRemoveSelect() { this.data1 = this.handleConcatArr(this.data1, this.nowSelectRightData) this.handleRemoveTabList(this.nowSelectRightData, this.selectArr); this.nowSelectRightData = []; }, handleConcatArr(selectArr, nowSelectData) { let arr = []; arr = arr.concat(selectArr, nowSelectData); return arr; }, handleRemoveTabList(isNeedArr, originalArr) { if(isNeedArr.length && originalArr.length) { for(let i=0; i<isNeedArr.length; i++) { for(let k=0; k<originalArr.length; k++) { if(isNeedArr[i]["name"] === originalArr[k]["name"]) { originalArr.splice(k, 1); } } } } } }, }; </script>
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
Vue3处理错误边界(error boundaries)的示例代码
在开发 Vue 3 应用时,处理错误边界(Error Boundaries)是一个重要的考量,在 Vue 3 中实现错误边界的方式与 React 等其他框架有所不同,下面,我们将深入探讨 Vue 3 中如何实现错误边界,并提供一些示例代码帮助理解什么是错误边界,需要的朋友可以参考下2024-10-10Ubuntu22.04使用nginx部署vue前端项目的详细教程
这篇文章主要给大家介绍了关于Ubuntu22.04使用nginx部署vue前端项目的详细教程,使用nginx部署前端项目是一篇非常详细的教程,旨在帮助初学者使用Nginx来部署前端项目,需要的朋友可以参考下2024-03-03Vue 子组件使用 this.$parent 无法访问到父组件数据和方法(解决思路)
这篇文章主要介绍了Vue 子组件使用 this.$parent 无法访问到父组件数据和方法,解决思路也很简单,本文结合实例代码给大家介绍的非常详细,需要的朋友可以参考下2023-07-07vue-video-player实现实时视频播放方式(监控设备-rtmp流)
这篇文章主要介绍了vue-video-player实现实时视频播放方式(监控设备-rtmp流),具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
最新评论