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

相关文章

好题——hdu2522(小数问题:求1/n的第一个循环节)

好喜欢这题,第一次做小数问题,一开始真心没思路,然后参考了网上的一些资料。 知识点***********************************无限不循环小数即无理数,不能写作两整数之比*****************************(一开始没想到,小学没学好) 此题1/n肯定是一个有限循环小数,了解这些后就能做此题了。 按照除法的机制,用一个函数表示出来就可以了,代码如下

hdu1043(八数码问题,广搜 + hash(实现状态压缩) )

利用康拓展开将一个排列映射成一个自然数,然后就变成了普通的广搜题。 #include<iostream>#include<algorithm>#include<string>#include<stack>#include<queue>#include<map>#include<stdio.h>#include<stdlib.h>#include<ctype.h>#inclu

C++11第三弹:lambda表达式 | 新的类功能 | 模板的可变参数

🌈个人主页: 南桥几晴秋 🌈C++专栏: 南桥谈C++ 🌈C语言专栏: C语言学习系列 🌈Linux学习专栏: 南桥谈Linux 🌈数据结构学习专栏: 数据结构杂谈 🌈数据库学习专栏: 南桥谈MySQL 🌈Qt学习专栏: 南桥谈Qt 🌈菜鸡代码练习: 练习随想记录 🌈git学习: 南桥谈Git 🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈�

让树莓派智能语音助手实现定时提醒功能

最初的时候是想直接在rasa 的chatbot上实现,因为rasa本身是带有remindschedule模块的。不过经过一番折腾后,忽然发现,chatbot上实现的定时,语音助手不一定会有响应。因为,我目前语音助手的代码设置了长时间无应答会结束对话,这样一来,chatbot定时提醒的触发就不会被语音助手获悉。那怎么让语音助手也具有定时提醒功能呢? 我最后选择的方法是用threading.Time

购买磨轮平衡机时应该注意什么问题和技巧

在购买磨轮平衡机时,您应该注意以下几个关键点: 平衡精度 平衡精度是衡量平衡机性能的核心指标,直接影响到不平衡量的检测与校准的准确性,从而决定磨轮的振动和噪声水平。高精度的平衡机能显著减少振动和噪声,提高磨削加工的精度。 转速范围 宽广的转速范围意味着平衡机能够处理更多种类的磨轮,适应不同的工作条件和规格要求。 振动监测能力 振动监测能力是评估平衡机性能的重要因素。通过传感器实时监

缓存雪崩问题

缓存雪崩是缓存中大量key失效后当高并发到来时导致大量请求到数据库,瞬间耗尽数据库资源,导致数据库无法使用。 解决方案: 1、使用锁进行控制 2、对同一类型信息的key设置不同的过期时间 3、缓存预热 1. 什么是缓存雪崩 缓存雪崩是指在短时间内,大量缓存数据同时失效,导致所有请求直接涌向数据库,瞬间增加数据库的负载压力,可能导致数据库性能下降甚至崩溃。这种情况往往发生在缓存中大量 k

6.1.数据结构-c/c++堆详解下篇(堆排序,TopK问题)

上篇:6.1.数据结构-c/c++模拟实现堆上篇(向下,上调整算法,建堆,增删数据)-CSDN博客 本章重点 1.使用堆来完成堆排序 2.使用堆解决TopK问题 目录 一.堆排序 1.1 思路 1.2 代码 1.3 简单测试 二.TopK问题 2.1 思路(求最小): 2.2 C语言代码(手写堆) 2.3 C++代码(使用优先级队列 priority_queue)

Spring框架5 - 容器的扩展功能 (ApplicationContext)

private static ApplicationContext applicationContext;static {applicationContext = new ClassPathXmlApplicationContext("bean.xml");} BeanFactory的功能扩展类ApplicationContext进行深度的分析。ApplicationConext与 BeanF

JavaFX应用更新检测功能(在线自动更新方案)

JavaFX开发的桌面应用属于C端,一般来说需要版本检测和自动更新功能,这里记录一下一种版本检测和自动更新的方法。 1. 整体方案 JavaFX.应用版本检测、自动更新主要涉及一下步骤: 读取本地应用版本拉取远程版本并比较两个版本如果需要升级,那么拉取更新历史弹出升级控制窗口用户选择升级时,拉取升级包解压,重启应用用户选择忽略时,本地版本标志为忽略版本用户选择取消时,隐藏升级控制窗口 2.

c++的初始化列表与const成员

初始化列表与const成员 const成员 使用const修饰的类、结构、联合的成员变量,在类对象创建完成前一定要初始化。 不能在构造函数中初始化const成员,因为执行构造函数时,类对象已经创建完成,只有类对象创建完成才能调用成员函数,构造函数虽然特殊但也是成员函数。 在定义const成员时进行初始化,该语法只有在C11语法标准下才支持。 初始化列表 在构造函数小括号后面,主要用于给