vue2.0 + element ui 实现表格穿梭框
element ui 官网里介绍了穿梭框(Transfer),但在实际使用过程中,会出现一些问题:
1.穿梭框里能放置的内容太少,不能满足复杂的业务需求。
2.当选项过多时,穿梭框很难实现分页,左右两个框的分页是联动的,左边翻页了右边也会跟着翻页。若要取消这种关联关系,可参考这篇文章: https://www.cnblogs.com/alice-bj/articles/10703903.html#_label4
本文参考了穿梭框的实现思路,实现了可分页的表格穿梭框,同时涉及到了表格多选与表格里添加表单等知识点。
html结构:
<el-form :inline="true" :model="staffTemp"><el-form-item label="手机号"><el-input v-model="staffTemp.phone"></el-input></el-form-item><el-form-item><el-button type="primary" @click="getStaffList">查找</el-button></el-form-item> </el-form> <el-row :gutter="20"><el-col :span="11"><el-tableref="staffTable"v-loading="listLoading":key="tableKey":data="staffList"borderfithighlight-current-row@selection-change="handleStaffChange"><el-table-column type="selection" :reserve-selection="true" width="55"></el-table-column><el-table-column label="手机" align="center"><template slot-scope="{row}"><span>{{ row.phone }}</span></template></el-table-column><el-table-column label="昵称" align="center"><template slot-scope="{row}"><span>{{ row.nickName }}</span></template></el-table-column></el-table></el-col><el-col :span="2" style="text-align:center;"><el-button@click="addStaff"type="primary":disabled="!staffData.length"icon="el-icon-arrow-right"circle></el-button><el-button@click="removeStaff"type="primary":disabled="!selectedStaffData.length"icon="el-icon-arrow-left"circlestyle="margin-left: 0;margin-top: 10px;"></el-button></el-col><el-col :span="11"><el-tableref="selectedStaffTable"v-loading="listLoading":key="tableKey":data="selectedStaffList"borderfithighlight-current-row@selection-change="handleSelectedStaffChange"><el-table-column type="selection" :reserve-selection="true" width="55"></el-table-column><el-table-column label="手机" align="center"><template slot-scope="{row}"><span>{{ row.phone }}</span></template></el-table-column><el-table-column label="昵称" align="center"><template slot-scope="{row}"><span>{{ row.nickName }}</span></template></el-table-column><el-table-column label="类型" align="center"><template slot-scope="{row}"><el-select class="filter-item" placeholder="请选择" v-model="row.staffTypeId"><el-optionv-for="item in staffOptions":key="item.key":label="item.display_name":value="item.key"></el-option></el-select></template></el-table-column></el-table></el-col> </el-row>
js部分:
data() {return {listLoading: true,staffTemp: {phone: "",nickName: "",staffTypeId: ""},staffList: [],selectedStaffList: [],staffData: [],selectedStaffData: [],tableKey: 0,rowKey: "rowKey",staffOptions: [{ key: 28, display_name: "补货员" },{ key: 29, display_name: "测试员" }],} }, methods: {// 从后台获取左边表格的数据 getStaffList() {fetchStaffList(this.staffTemp).then(res => {if (res.value.staff.length === 0) {alert("查无此人");}this.staffList = res.value.staff;});},// 将左边表格选择项存入staffData中 handleStaffChange(rows) {this.staffData = [];if (rows) {rows.forEach(row => {if (row) {this.staffData.push(row);}});}},// 左边表格选择项移到右边 addStaff() {setTimeout(() => {this.$refs["staffTable"].clearSelection();this.$refs["selectedStaffTable"].clearSelection();}, 0);let repeat = false;this.selectedStaffList.forEach(item => {if (this.staffData[0] && item.phone === this.staffData[0].phone) {repeat = true;alert("此员工已添加");return;}});if (repeat === false) {this.staffData.forEach(item => {this.selectedStaffList.push(item);});for (let i = 0; i < this.staffList.length; i++) {for (let j = 0; j < this.staffData.length; j++) {if (this.staffList[i] &&this.staffData[j] &&this.staffList[i].phone === this.staffData[j].phone) {this.staffList.splice(i, 1);}}}}},// 右边表格选择项移到左边removeStaff() {setTimeout(() => {this.$refs["staffTable"].clearSelection();this.$refs["selectedStaffTable"].clearSelection();}, 0);this.selectedStaffData.forEach(item => {this.staffList.push(item);});for (let i = 0; i < this.selectedStaffList.length; i++) {for (let j = 0; j < this.selectedStaffData.length; j++) {if (this.selectedStaffList[i] &&this.selectedStaffData[j] &&this.selectedStaffList[i].phone === this.selectedStaffData[j].phone) {this.selectedStaffList.splice(i, 1);}}}},// 将右边表格选择项存入selectedStaffData中 handleSelectedStaffChange(rows) {this.selectedStaffData = [];if (rows) {rows.forEach(row => {if (row) {this.selectedStaffData.push(row);}});}},// 提交 modifyStaff() {let isEmpty = false;this.selectedStaffList.forEach(item => {if (!item.staffTypeId) {alert("请选择类型");isEmpty = true;return;}});if (isEmpty === false) {editStaff(this.selectedStaffList, this.deviceQuery.id).then(res => {this.staffListVisible = false;this.$notify({title: "成功",message: "修改成功",type: "success",duration: 2000});});}} }
多选表格:手动添加一个 el-table-column,设type
属性为 selection 即可;当选择项发生变化时会触发 selection-change 事件,并将选择项作为参数传入。在这里,我们将左边表格的选择项缓存在staffData中,右边表格的选择项缓存在 selectedStaffData 中。
在移动选择项时,一是要将自身的该项删除,二是要将该项放入对方列表中(需要去重)。
关于分页功能可在左右两个表格分别添加,互不影响,具体可参考我之前的博客 https://www.cnblogs.com/zdd2017/p/11153527.html
转载于:https://www.cnblogs.com/zdd2017/p/11188307.html
vue2.0 + element ui 实现表格穿梭框相关推荐
- DataGear 制作基于Vue2、Element UI前端框架的数据可视化看板
DataGear 数据可视化看板内置了一些基本.简单的页面交互组件,当它们无法满足实际看板需求时,可以引入更流行和强大的前端框架. 本文以Vue2.Element UI前端框架为例,介绍如何制作具有更 ...
- element ui设置表格表头高度和每一行的高度
填坑记录:今天用element ui的表格组件做用户信息展示,直接拉取的官网的代码过来,发现表头和每一行都太高了,如下: 因为第一次使用element ui的表格组件,不太清楚会遇到这样的坑,以为能轻 ...
- Element UI Table表格样式调整
调整Element UI Table表格的样式 最终效果: 单元格合并,样式调整 模拟后端返回数据 {teamName: '小组一',outsourceFlag: '是',adminName: '张三 ...
- Vue中使用Transfer实现表格穿梭框(可搜索)
Vue中使用Transfer实现表格穿梭框(可搜索) 需求:使用Transfer实现带分页并可搜索的穿梭框.给不同用户分配不同的应用服务. 前端 1.注册组件(main.js) import { Tr ...
- element ui Table表格数据筛选功能实现
先来看看实现效果 element ui Table表格数据筛选功能实现 查看Element官网 关于筛选的实例. 在列中设置filters filter-method属性即可开启该列的筛选,filte ...
- element UI 修改表格边框颜色
element UI 修改表格边框颜色 由于我只想要改变该页面的表格边框颜色,加上表格类名 /** 改变边框颜色*/.right-content .el-table--border, .el-tabl ...
- Vue实现Element UI的下拉框默认选中,值来自父组件或异步获取
子组件使用watch监听父组件传过来的值,并且赋值给子组件的data参数. 1.父组件传了一个userId属性给子组件 <Children@searchForm="searchForm ...
- 【vue】Element UI实现表格表头纵向显示
element实现表格表头纵向显示 我们正常使用Element UI写表格的时候,<el-table-column/> 标签里面都是纵向的.那么我们的需求有时候会要求行列转换,那么来看看咋 ...
- vue2.0 element学习
1,bootstrap和vue2.0结合使用 vue文件搭建好后,引入jquery和bootstrap 我采用的方式为外部引用 在main.js内部直接导入 用vue-cli直接安装jquery和bo ...
最新文章
- Google Colab使用教程
- vscode快速注释_Python快速入门(一)
- IIS7.5 HTTP 错误 500.19 - Internal Server Error 问题的解决方案
- vue+element-ui操作删除(单行和批量删除)
- 【渝粤题库】国家开放大学2021春2223物业管理财税基础题目
- 定时任务的并发_03
- 在Bootstrap中使用类的按钮类型
- Dynamics 365中的应用程序介绍
- android 录音原始文件_Android 11可能最终会取消Android对视频录制的4GB文件大小限制...
- html5d调用百度语音,易语言调用百度语音平台实现文字转换语音功能的代码
- 编译原理教程_8 静态语义分析和中间代码生成
- JDC job obend
- windows如何更改字体
- 抖音那种一道光闪过转场效果是怎么做的?
- 数据库安全性存取控制机制
- 《码农翻身》之技术之路
- 不靠广告联盟也能月赚万元
- excel替换固定sql中的某个值实现批量导入
- psd转换为html模板
- 相机拍照时预览卡顿问题