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

项目即将完成，我想写一下总结，总结一些功能方便以后借阅，今天做的这个功能是table表格之间作人员筛选弹窗功能，父级列表点击新增，就会弹出人员筛选的弹窗。列表是人员的总人数，列表作为容器放你选的人员，可以删除，最后提交的人员列表给父级列表。

1.此功能的难点就是回显是多选框选中状态，不好处理，不过已经在代码中标识。需要注意：弹窗的数据必须全部返给前端，前端自行分页，这样在修改时，需要处理回显数据的选择状态时，筛选已选择的数据比较容易处理。

2.在列表，中手动写出单选、全选、添加、移除时的状态。

如下图：

父级列表：

人员筛选：

父级代码：

<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>