项目即将完成,我想写一下总结,总结一些功能方便以后借阅,今天做的这个功能是table表格之间作人员筛选弹窗功能,父级列表点击新增,就会弹出人员筛选的弹窗。Atable列表是人员的总人数,Btable列表作为容器放你选的人员,可以删除,最后提交Btable的人员列表给父级列表。
1.此功能的难点就是回显是多选框选中状态,不好处理,不过已经在代码中标识。需要注意:弹窗的数据必须全部返给前端,前端自行分页,这样在修改时,需要处理回显数据的选择状态时,筛选已选择的数据比较容易处理。
2.在Btable列表,中手动写出checkbox单选、全选、添加、移除时的状态。
如下图:
父级列表:
人员筛选:
父级代码:
<template>
<div>
<el-button type="success" size="mini" @click="add()">新增</el-button>
<el-table
class="acceptorsTable"
:data="currentPageData"
style="width: 100%"
>
<el-table-column
type="index"
label="序号"
headerAlign="center"
align="center"
>
</el-table-column>
<el-table-column
label="姓名"
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-button
size="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 = acceptorsArray
this.setCurrentPageData()
console.log(this.nowknowledgeint)
},
// 分页
// 设置当前页面数据,对数组操作的截取规则为[0~5],[5~10]...,
setCurrentPageData() {
let begin = (this.currentPage - 1) * this.pageSize
let end = this.currentPage * this.pageSize
this.currentPageData = this.nowknowledgeint.slice(
begin,
end
)
},
handleSizeChange(val) {
this.pageSize = val
let begin = (this.currentPage - 1) * val
let end = this.currentPage * val
this.currentPageData = this.nowknowledgeint.slice(
begin,
end
)
},
handleCurrentChange(val) {
if (this.currentPage == this.totalPage) return
this.currentPage = val
this.setCurrentPageData()
},
},
}
</script>
<style type="text/css">
</style>
人员筛选:
<template>
<div>
<el-dialog
:visible.sync="outInnerVisible"
append-to-body
width="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-input
placeholder="请输入内容"
suffix-icon="el-icon-search"
clearable
v-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-table
class="transferBeforeTbale"
ref="multipleTable"
:data="newRuleForm.tableDataList"
tooltip-effect="dark"
style="width: 100%"
@select="handleSelect"
@select-all="handleSelectAll"
>
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column
type="index"
label="序号"
headerAlign="center"
align="center"
:index="indexMethod"
>
</el-table-column>
<el-table-column
label="姓名"
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-table
class="transferAfterTable"
:data="newRuleForm.newTableDataList"
style="width: 100%">
<el-table-column
type="index"
label="序号"
headerAlign="center"
align="center"
>
</el-table-column>
<el-table-column
label="姓名"
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-button
size="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:'',
// table
newRuleForm:{
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 = true
if(!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 = 0
this.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 = false
this.newRuleForm.newTableDataList = [];
},
// 关闭
close(){
this.newRuleForm.newTableDataList = [];
},
//分页
handleSizeChange(val) {
this.pageSize = val
this.currentPage = 0
this.tableData(this.currentPage,this.pageSize,this.inputValue)
this.handleCurrentChange(1)
},
handleCurrentChange(val) {
this.$nextTick(()=>{
this.currentPage = val-1
this.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>