说明:
在进行商品数据过滤时,把左侧表格中选中的数据添加到右侧表格时,就必须在原来数组中移除选中部分的值,如图:
如何实现这种效果,下面介绍两种方法
案例流程
1、在data中定义对应的数组
export default {
data() {
return {
dataListLoading: false,
leftDataList: [], //左边表格数据
leftDataListSelections: [], //左边表格选中数据
rightDataList: [], //右侧表格数据
}
},
.....
}
2、初始化数据
mounted(){
this.getDataList()
},
methods: {
// 获取数据列表
async getDataList(queryType) {
this.dataListLoading = true
const res = await this.$http({
url: `/product/info/list`,
method: 'get',
})
let data = res.data
if (data && data.code === 0) {
this.leftDataList = data.page.list
} else {
this.leftDataList = []
}
this.dataListLoading = false
},
}
3、表格布局
<div class="table-box">
<div class="left-table-box">
<el-button size="mini" v-if="isAuth('sale:print:save')" type="success"
@click="addAllHandle()" icon="el-icon-plus" :disabled="leftDataListSelections.length <= 0">添加</el-button>
<el-table :data="leftDataList" size="mini" v-loading="dataListLoading" @selection-change="leftSelectionChangeHandle"
style="width: 100%;" height="400px"
:header-cell-style="{ background: '#fcfcfc', color: '#606266', height:'36px'}">
<el-table-column type="selection" header-align="center" align="center" width="50">
</el-table-column>
<el-table-column prop="productCode" header-align="center" align="center" label="产品编码" width="130" >
</el-table-column>
<el-table-column prop="productName" header-align="center" align="center" label="产品名称" width="130" show-overflow-tooltip>
</el-table-column>
<el-table-column prop="standard" header-align="center" align="center" label="规格" width="130" show-overflow-tooltip>
</el-table-column>
<el-table-column prop="unit" header-align="center" align="center" label="单位">
</el-table-column>
<el-table-column prop="salePrice" header-align="center" align="center" label="售价" width="90">
</el-table-column>
<el-table-column fixed="right" header-align="center" align="center" width="100" label="操作">
<template slot-scope="scope">
<el-button size="mini" type="text" v-if="isAuth('sale:print:save')"
@click="addLeftHandle(scope.row, scope.$index)">添加</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex"
:page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage"
layout="total, sizes, prev, pager, next, jumper">
</el-pagination>
</div>
<div class="right-table-box">
<el-button size="mini" v-if="isAuth('sale:print:delete')" type="danger"
@click="deleteAllHandle()" icon="el-icon-delete" >清空</el-button>
<el-table :data="rightDataList" size="mini" v-loading="dataListLoading"
style="width: 100%;" height="400px"
:header-cell-style="{ background: '#fcfcfc', color: '#606266', height:'36px'}">
<el-table-column prop="productCode" header-align="center" align="center" label="产品编码" width="130" >
</el-table-column>
<el-table-column prop="productName" header-align="center" align="center" label="产品名称" width="130" show-overflow-tooltip>
</el-table-column>
<el-table-column prop="standard" header-align="center" align="center" label="规格" width="130" show-overflow-tooltip>
</el-table-column>
<el-table-column prop="unit" header-align="center" align="center" label="单位">
</el-table-column>
<el-table-column prop="salePrice" header-align="center" align="center" label="售价" width="90">
</el-table-column>
<el-table-column fixed="right" header-align="center" align="center" width="100" label="操作">
<template slot-scope="scope">
<el-button size="mini" type="text" v-if="isAuth('sale:print:delete')"
@click="deleteRightHandle(scope.row, scope.$index)">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
</div>
样式
<style lang="scss" scoped>
.el-table{
border: 1px solid #EBEEF5!important;
border-radius: 5px;
}
.table-box{
display: flex;
flex-direction: row;
justify-content: space-between;
.left-table-box{
width: 49.5%;
}
.right-table-box{
width: 49.5%;
}
}
</style>
4、实现左侧按钮 addAllHandle事件,将左侧选中的内容添加到右侧
方法1:采用遍历双循环
addAllHandle(){
this.rightDataList.push.apply(this.rightDataList, this.leftDataListSelections)
for(let i = 0; i < this.leftDataListSelections.length; i++){
for(let j = 0; j < this.leftDataList.length; j++){
if(this.leftDataList[j].productId == this.leftDataListSelections[i].productId){
this.leftDataList.splice(j,1);
break;
}
}
}
},
方法2:使用es6的some方法
addAllHandle(){
this.rightDataList.push.apply(this.rightDataList, this.leftDataListSelections)
let arr = this.leftDataList
let selectedArr = this.leftDataListSelections
this.leftDataList = arr.filter(x => !selectedArr.some(y => y.productId === x.productId ))
},