应用场景
我这边做的是一个进销存系统,模块是库存盘点,需要实现新增盘点单,暂存盘点单。做到新增盘点单选择商品时的一些记录。功能是从全部商品中选取几种放入表单表格中,并附带默认值,默认值更改后,再次选择商品,商品更改后的默认值不变,商品表格可进行分页多选,下面一步一步来
实现商品表格数据多选(因为目前只做了五条数据,所以每页展示了两条)
效果
用到三个数组进行数据变化
1、商品明细表格
2、全部商品列表数据
3、暂存选中商品数组 checkGoods,这个进行编辑的时候用处就体现出来了
一、设置表格分页多选功能
1、将表格进行属性设置,表格设置 :row-key=“getRowKeys” @selection-change=“handleSelectionChange” 选择列进行多选设置 :reserve-selection=“true”
<el-table
ref="multipleTable"
:data="goodsTableData"
tooltip-effect="dark"
style="width: 100%"
:row-key="getRowKeys"
@selection-change="handleSelectionChange"
>
<el-table-column
align="center"
type="selection"
width="55"
:reserve-selection="true"
>
</el-table-column>
</el-table>
2、编写方法
//根据你要绑定的值进行返回一般是id,我这边是goodsId
getRowKeys(row) {
return row.goodsId;
},
// 弹窗选中商品进行赋值
handleSelectionChange(selection) {
// 如果是反显选中操作 不做处理
if (this.toggleRowSelect) {
return;
}
this.checkGoods = selection;
},
二、分页获取数据将选中的值进行选中
这里有一点是编辑和新增放到了一起,所以需要判断checkGoods的长度,编辑的时候tableData是有值的,但是还没进行选择,所以checkGoods没值,选中设置数组就应该使用tableData。新增的时候就不用考虑这些
// 获取列表数据
getDataList() {
this.chooseGoodsForm.houseId = this.form.houseId;
//这是我的请求方法
this.$http("/jxc/base/baseGoods/houseList", "GET", this.chooseGoodsForm).then(
(res) => {
if (res && res.code == 200) {
this.goodsTableData = res.result.records;
this.total = res.result.total;
// 这里需要加个判断,如果checkGoods没值,说明是将暂存的数据放到弹窗的商品默认选中,如果checkGoods有值,说明选择商品弹窗已经进行选择操作
let arr =
this.checkGoods.length > 0 ? this.checkGoods : this.tableData;
//--------------------------------------------------------------
this.$nextTick(() => {
this.toggleRowSelect = true; // 记录是否是反显选中操作,因为选中改变会触发@selection-change事件
// tableData当页数据 multipleSelection需要反显的数据(已经选中的)
this.$refs.multipleTable &&
this.goodsTableData.forEach((row) => {
//将id一致的进行选中设置
let selectRow = arr.find(
(item) => item.goodsId === row.goodsId
);
// 注意:toggleRowSelection传的row一定是表格数据中的某一行数据
this.$refs.multipleTable.toggleRowSelection(
row,
selectRow ? true : false
);
});
this.toggleRowSelect = false;
//---------------------------------------------------------------------------
});
} else {
this.$message({
message: res.message,
type: "warning",
});
}
}
);
},
三、保存选中的商品
我这里需要设置一个盘点数量默认值,这里有两种情况,一种是直接保存,另外一种是我已经选择好了商品,并且已经将商品数量进行了更改,再次打开弹窗选中该商品时,盘点数量默认值应该展示修改后的的值。看图理解一下
1、默认实盘数量和商品数量是一致的
2、我修改数量后再次选择该商品,实盘数量展示我修改后的值
代码
// 确定选择商品
chooseGoodsConfirm() {
let arr = JSON.parse(JSON.stringify(this.checkGoods));
let arr1 = JSON.parse(JSON.stringify(this.tableData));
let arr2 = [];
for (let i = 0; i < arr.length; i++) {
const element = arr[i];
// 如果原来的数组中包含该商品,则使用原来的值
if (this.getObj(element.goodsId, arr1)) {
let obj = this.setObj(element.goodsId, arr1)[0];
arr2.push(obj);
} else {
// 如果没有设置默认值
element.profitLossNums = 0; //盈亏数量
element.checkNums = element.actualCounts; //实盘数量
element.curNums = element.actualCounts; //当时库存数量
element.amount = 0; //盈亏金额
this.actualCountsChange(element);
arr2.push(element);
}
}
this.tableData = JSON.parse(JSON.stringify(arr2));
this.dialogChooseGoods = false;
},
// 根据id判断数组中是否含有对象
getObj(id, arr) {
return arr.some((value) => {
return value.goodsId == id;
});
},
// 根据id返回数组中含有对象
setObj(id, arr) {
let arr1 = [];
for (let i = 0; i < arr.length; i++) {
const element = arr[i];
if (element.goodsId == id) {
arr1.push(element);
}
}
return arr1;
},
四、选中商品删除
代码
// 表格删除按钮
tableDelBtn(id) {
this.tableData = this.tableData.filter((item) => {
return item.goodsId != id;
});
this.checkGoods = this.checkGoods.filter((item) => {
return item.goodsId != id;
});
},
五、结语
总体来讲,复杂的地方就是编辑的时候,就是将暂存的数据拿过来,放进商品明细列表后,再选择商品设置选中,默认数量不变。
如有更简洁的方法,欢迎指教,共同进步