table列表的弹窗下的多选框反选问题(人员筛选功能)

2023-11-23 17:20

本文主要是介绍table列表的弹窗下的多选框反选问题(人员筛选功能),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

项目即将完成,我想写一下总结,总结一些功能方便以后借阅,今天做的这个功能是table表格之间作人员筛选弹窗功能,父级列表点击新增,就会弹出人员筛选的弹窗。Atable列表是人员的总人数,Btable列表作为容器放你选的人员,可以删除,最后提交Btable的人员列表给父级列表。
1.此功能的难点就是回显是多选框选中状态,不好处理,不过已经在代码中标识。需要注意:弹窗的数据必须全部返给前端,前端自行分页,这样在修改时,需要处理回显数据的选择状态时,筛选已选择的数据比较容易处理。
2.在Btable列表,中手动写出checkbox单选、全选、添加、移除时的状态。
如下图:

父级列表:
在这里插入图片描述

人员筛选:
在这里插入图片描述
父级代码:

<template><div><el-button type="success" size="mini" @click="add()">新增</el-button><el-tableclass="acceptorsTable":data="currentPageData"style="width: 100%"><el-table-columntype="index"label="序号"headerAlign="center"align="center"></el-table-column><el-table-columnlabel="姓名"width="400"headerAlign="center"align="center"><template slot-scope="scopes">{{ scopes.row.name}}</template></el-table-column><el-table-column label="操作"headerAlign="center"align="center"><template slot-scope="scopes"><el-buttonsize="mini"type="danger"@click="newHandleDelete(scopes.row)">删除</el-button></template></el-table-column></el-table><fruits ref="edit" @childClosed ="closed"></fruits></div>
</template>
<script> import fruits from './fruits'export default {components: {fruits},data(){return {ruleForm: {acceptors: [],},// 分页nowknowledgeint:[],pageSize: 10,pageSizes: [10, 20, 30, 50, 100], // select选项设置:条/页currentPage: 1,total: 0,currentPageData: [], // 当前页显示内容}},created(){},mounted(){},methods: {// 删除newHandleDelete(row) {this.nowknowledgeint.forEach((n, index) => {if (n.id == row.id) {this.nowknowledgeint.splice(index, 1);}});},add(command) {this.$refs.edit.open(true, {});},edit(row) {this.$refs.edit.open(false,row)},// 关闭closed(data){var acceptorsArray = []if(data.length > 0){data.forEach(value => {acceptorsArray.push(value)});}this.nowknowledgeint = acceptorsArraythis.setCurrentPageData()console.log(this.nowknowledgeint)},// 分页// 设置当前页面数据,对数组操作的截取规则为[0~5],[5~10]...,setCurrentPageData() {let begin = (this.currentPage - 1) * this.pageSizelet end = this.currentPage * this.pageSizethis.currentPageData = this.nowknowledgeint.slice(begin,end)},handleSizeChange(val) {this.pageSize = vallet begin = (this.currentPage - 1) * vallet end = this.currentPage * valthis.currentPageData = this.nowknowledgeint.slice(begin,end)},handleCurrentChange(val) {if (this.currentPage == this.totalPage) returnthis.currentPage = valthis.setCurrentPageData()},},}
</script>
<style type="text/css">
</style>

人员筛选:

<template><div><el-dialog:visible.sync="outInnerVisible"append-to-bodywidth="70%"class="groupEdit"style="overflow:auto;"@close ='close'><el-form:model="newRuleForm"ref="newRuleForm"label-width="100px"class="send"><div style="width:296px; padding:8px 0px;"><el-inputplaceholder="请输入内容"suffix-icon="el-icon-search"clearablev-model="inputValue"@keyup.enter.native="searchEnterFun"><el-button slot="append" @click="serch()">查询</el-button></el-input></div><div class="clearfix"><div class="transferBefore fl"><el-tableclass="transferBeforeTbale"ref="multipleTable":data="newRuleForm.tableDataList"tooltip-effect="dark"style="width: 100%"@select="handleSelect"@select-all="handleSelectAll"><el-table-columntype="selection"width="55"></el-table-column><el-table-columntype="index"label="序号"headerAlign="center"align="center":index="indexMethod"></el-table-column><el-table-columnlabel="姓名"header-align="center"align="center"><template slot-scope="scope">{{ scope.row.name}}</template></el-table-column></el-table><div class="contactsyncPage" style="padding:8px 0px;"><el-pagination:pager-count="5"@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="Number(currentPage+1)":page-sizes="pageSizes":page-size="pageSize"layout="total, prev, pager, next, jumper":total="total"></el-pagination></div></div><div class="transferAfter fr"><el-tableclass="transferAfterTable":data="newRuleForm.newTableDataList"style="width: 100%"><el-table-columntype="index"label="序号"headerAlign="center"align="center"></el-table-column><el-table-columnlabel="姓名"headerAlign="center"align="center"><template slot-scope="scope">{{ scope.row.name}}</template></el-table-column><el-table-column label="操作"headerAlign="center"align="center"width="60"><template slot-scope="scope"><el-buttonsize="mini"type="danger"@click="handleDelete(scope.row)">删除</el-button></template></el-table-column></el-table></div></div></el-form><div class="submitButton"><el-button type="primary" size="small" @click="onSubmit">确定</el-button><el-button size="small" @click="cancel">取消</el-button></div></el-dialog></div>
</template>
<script>export default {data(){return{outInnerVisible: false,// 查询inputValue:'',// tablenewRuleForm:{tableDataList: [],newTableDataList:[],},ids: [], // 选中的数据id数组newRows:[],// 分页pageSize: 10,pageSizes: [10, 20, 30, 50, 100], // select选项设置:条/页currentPage: 0,total: 0,}},computed: {},created(){this.tableData()},mounted(){},methods: {// 数据回显open(isEdit, obj){this.outInnerVisible = trueif(!isEdit){// 修改this.inputValue = "";this.pageSize=10;this.currentPage=0;this.newRuleForm.tableDataList = [];this.$nextTick(()=>{this.newRuleForm.newTableDataList =  JSON.parse(JSON.stringify(obj))})this.tableData(this.currentPage,this.pageSize,this.inputValue)}else{// 新增this.inputValue = "";this.pageSize=10;this.currentPage=0;this.newRuleForm.tableDataList = []this.tableData(this.currentPage,this.pageSize,this.inputValue)}},// 查询searchEnterFun(e) {var keyCode = window.event ? e.keyCode : e.which;if (keyCode == 13) {this.serch();}},serch(){this.currentPage = 0this.tableData(this.currentPage,this.pageSize,this.inputValue)},//获取人员tableData(pageIndex,pageSize,userName) {this.$axios.post("接口", {post:'参数'}).then((res) => {this.total = res.data.totalCount; //总页数this.newRuleForm.tableDataList = res.data.list; //内容// 编辑时,如果该页存在选中的数据,则选中(重点)if (this.newRuleForm.newTableDataList.length) {this.toggleSelection(this.newRuleForm.newTableDataList);}});},// 单选handleSelect(selection, row) {let allRows = selection.filter((item) => !!item);if (allRows.find(item => item.userId === row.userId)) {this.addRows([row]);} else {this.removeRows([row]);}},// 全选handleSelectAll(selection) {if (selection.length > 1){this.addRows(this.newRuleForm.tableDataList);} else {this.removeRows(this.newRuleForm.tableDataList);}},// 添加addRows(rows) {for (const key of rows){if (!this.newRuleForm.newTableDataList.find((item) => item.id === key.id)) {this.$nextTick(()=>{this.newRuleForm.newTableDataList.push(key);})}}},// 移除removeRows(rows) {if (this.newRuleForm.newTableDataList.length > 0){for (const key of rows) {this.$nextTick(()=>{this.newRuleForm.newTableDataList = this.newRuleForm.newTableDataList.filter((item) => item.id !== key.id);}) }}},// 如果该页存在选中的数据,则选中(难点)toggleSelection(rows){if (rows) {rows.forEach(row => {this.$nextTick(() => {const checked = this.newRuleForm.tableDataList.find(tableRow => tableRow.id === row.id);this.$refs.multipleTable.toggleRowSelection(checked, true);});});} else {this.$refs.multipleTable.toggleRowSelection(this.newRuleForm.tableDataList, false);this.removeRows(this.newRuleForm.tableDataList);}},// 删除时调用handleDelete(row) {this.$nextTick(x=>{this.$refs.multipleTable.toggleRowSelection(row,false);this.$refs.multipleTable.toggleRowSelection(this.newRuleForm.tableDataList.find( // 这是我弹框表格的数据item => row.id === item.id),false);this.newRuleForm.newTableDataList.forEach((n, index) => {if (n.id === row.id) {this.newRuleForm.newTableDataList.splice(index, 1);}});})},// 序号indexMethod(index) {return index + 1 + this.currentPage * this.pageSize},// 提交onSubmit(){this.outInnerVisible = false// 传给父级this.$emit('childClosed',this.newRuleForm.newTableDataList);},// 取消cancel() {this.outInnerVisible = falsethis.newRuleForm.newTableDataList = [];},// 关闭close(){this.newRuleForm.newTableDataList = [];},//分页handleSizeChange(val) {this.pageSize = valthis.currentPage = 0this.tableData(this.currentPage,this.pageSize,this.inputValue)this.handleCurrentChange(1)},handleCurrentChange(val) {this.$nextTick(()=>{this.currentPage = val-1this.tableData(this.currentPage,this.pageSize,this.inputValue)})} },}
</script>
<style scoped>
.clear {clear: both;
}.clearfix:after {content: ".";height: 0px;display: block;visibility: hidden;clear: both;
}.clearfix {zoom: 1;
}
.fl {float: left;
}
.fr{float:right;
}
.transferBefore{width: 48%;
}
.transferBeforeTbale{border-top:solid 1px #EBEEF5;border-left:solid 1px #EBEEF5;border-right:solid 1px #EBEEF5;
}
.transferAfter{width:48%;
}
.transferAfterTable{border-top:solid 1px #EBEEF5;border-left:solid 1px #EBEEF5;border-right:solid 1px #EBEEF5;height:530px;overflow-y: auto;
}
.submitButton{padding-top:10px ;text-align: right;
}
</style>

这篇关于table列表的弹窗下的多选框反选问题(人员筛选功能)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/419538

相关文章

线上Java OOM问题定位与解决方案超详细解析

《线上JavaOOM问题定位与解决方案超详细解析》OOM是JVM抛出的错误,表示内存分配失败,:本文主要介绍线上JavaOOM问题定位与解决方案的相关资料,文中通过代码介绍的非常详细,需要的朋... 目录一、OOM问题核心认知1.1 OOM定义与技术定位1.2 OOM常见类型及技术特征二、OOM问题定位工具

Python使用FastAPI实现大文件分片上传与断点续传功能

《Python使用FastAPI实现大文件分片上传与断点续传功能》大文件直传常遇到超时、网络抖动失败、失败后只能重传的问题,分片上传+断点续传可以把大文件拆成若干小块逐个上传,并在中断后从已完成分片继... 目录一、接口设计二、服务端实现(FastAPI)2.1 运行环境2.2 目录结构建议2.3 serv

Vue3绑定props默认值问题

《Vue3绑定props默认值问题》使用Vue3的defineProps配合TypeScript的interface定义props类型,并通过withDefaults设置默认值,使组件能安全访问传入的... 目录前言步骤步骤1:使用 defineProps 定义 Props步骤2:设置默认值总结前言使用T

Debian 13升级后网络转发等功能异常怎么办? 并非错误而是管理机制变更

《Debian13升级后网络转发等功能异常怎么办?并非错误而是管理机制变更》很多朋友反馈,更新到Debian13后网络转发等功能异常,这并非BUG而是Debian13Trixie调整... 日前 Debian 13 Trixie 发布后已经有众多网友升级到新版本,只不过升级后发现某些功能存在异常,例如网络转

Web服务器-Nginx-高并发问题

《Web服务器-Nginx-高并发问题》Nginx通过事件驱动、I/O多路复用和异步非阻塞技术高效处理高并发,结合动静分离和限流策略,提升性能与稳定性... 目录前言一、架构1. 原生多进程架构2. 事件驱动模型3. IO多路复用4. 异步非阻塞 I/O5. Nginx高并发配置实战二、动静分离1. 职责2

解决升级JDK报错:module java.base does not“opens java.lang.reflect“to unnamed module问题

《解决升级JDK报错:modulejava.basedoesnot“opensjava.lang.reflect“tounnamedmodule问题》SpringBoot启动错误源于Jav... 目录问题描述原因分析解决方案总结问题描述启动sprintboot时报以下错误原因分析编程异js常是由Ja

MySQL 表空却 ibd 文件过大的问题及解决方法

《MySQL表空却ibd文件过大的问题及解决方法》本文给大家介绍MySQL表空却ibd文件过大的问题及解决方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考... 目录一、问题背景:表空却 “吃满” 磁盘的怪事二、问题复现:一步步编程还原异常场景1. 准备测试源表与数据

解决Nginx启动报错Job for nginx.service failed because the control process exited with error code问题

《解决Nginx启动报错Jobfornginx.servicefailedbecausethecontrolprocessexitedwitherrorcode问题》Nginx启... 目录一、报错如下二、解决原因三、解决方式总结一、报错如下Job for nginx.service failed bec

SysMain服务可以关吗? 解决SysMain服务导致的高CPU使用率问题

《SysMain服务可以关吗?解决SysMain服务导致的高CPU使用率问题》SysMain服务是超级预读取,该服务会记录您打开应用程序的模式,并预先将它们加载到内存中以节省时间,但它可能占用大量... 在使用电脑的过程中,CPU使用率居高不下是许多用户都遇到过的问题,其中名为SysMain的服务往往是罪魁

基于Java和FFmpeg实现视频压缩和剪辑功能

《基于Java和FFmpeg实现视频压缩和剪辑功能》在视频处理开发中,压缩和剪辑是常见的需求,本文将介绍如何使用Java结合FFmpeg实现视频压缩和剪辑功能,同时去除数据库操作,仅专注于视频处理,需... 目录引言1. 环境准备1.1 项目依赖1.2 安装 FFmpeg2. 视频压缩功能实现2.1 主要功