问题需求(前言描述)
公司的供货商系统涉及到发货出库,产品要求可以分页保存之前选择的数据,最后点击确定一并带出到外面的表格里,让后端写接口是肯定不行的,所以前端只能我自己来
解决思路(前言描述)
可以利用map对象特性,将当前页选中的数据匹配对应到map对象里,在监听多选方法里实时更新当前页的操作,对应的储存到map对象里,最后选择完毕点击弹窗确认,整合map对象里的数据,话不多说上代码
1.HTML
2.JS
初始化对象
data(){
return {
newArr: new Map(), //定一个map对象
chooseLength: '', //选中的个数
cgDia:false, //控制弹窗布尔值
tableData: [ //为了方便演示写的表格假数据,记住一定要让后端给你一个唯一值
{
id: 8429,//这个目前就是唯一值
omsGoodsCode: '',
goodsName: '分仓商品002',
value: 'LJW',
barcode: null,
brandName: '中杰',
goodsType: 'INIT',
},
{
id: 8405,
omsGoodsCode: '',
goodsName: '分仓商品001',
value: '分仓商品001',
barcode: null,
brandName: '东成',
},
{
id: 8394,
omsGoodsCode: '',
goodsName: '测试',
value: 'Z1C-FF03-hh(26) 80/88 750w 7*40T 50×55',
barcode: null,
brandName: '标智',
goodsType: 'INIT',
},
],
}
}
初始化界面打开弹窗,这里的arr参数则为之前选中的数据id集合,如果第一次选则商品弹窗界面则默认为空
/**初始化界面打开弹窗 */
initModal(arr = []) {
//如果arr不为空,则需要进行整合,将数据放置到map对象里
const newMap = new Map();
arr.forEach((ele) => {
newMap.set(ele.id, ele);
});
this.newArr = newMap;
this.getChooseLength();
this.initPage();
this.cgDia = true;
},
arr 接口返回的表格Data数据,切换分页和点击确定时,保存之前页面选中的数据
/**
* @param {arr} 接口返回的表格Data数据
* 切换分页和点击确定时,保存之前页面选中的数据
*/
deploySelcect(arr) {
//整合选中的数据id集合
const idList = [];
this.newArr.forEach((ele) => {
idList.push(ele.id);
});
//获取下来的数据判断是否存在选中的list里,是则赋值true,并返回处理好的数据
return arr.map((ele) => {
ele._checked = idList.includes(ele.id);
return ele;
});
},
初始化商品选择弹窗,也支持查询获取表格数据(就是平时常见业务获取数据)
/**初始化商品选择弹窗,也支持查询获取表格数据 */
async initPage(page = 1, pageSize = 10) {
const pageOptions = { page, pageSize };
const data = this.$formatParams({ ...this.form, ...pageOptions });
//获取后端的数据,这里就根据自己的业务接口来
let { total, items, success } = await api.supPurchaseOrder4SearchList(
data
);
//在这里处理好数据返回
items = this.deploySelcect(items);
this.orderData = items || [];
this.total = total;
return items;
},
获取已选数据的个数,从map对象里循环获得各页选中的数据
/**获取已选数据的个数 */
getChooseLength() {
const list = [];
this.newArr.forEach((ele) => {
list.push(ele);
});
this.chooseLength = list.length;
}
表格多选操作,这一步往map里塞值,对应的当前页储存
/**表格多选操作 */
selectRow(arr) {
arr.forEach((ele) => {
this.newArr.set(ele.id, ele);
});
this.getChooseLength();
}
最后点击弹窗确定按钮,整合数据并发送给父级添加商品页,大功告成
/**点击确定按钮 */
sure() {
const list = [];
this.newArr.forEach((ele) => {
list.push(ele);
});
this.$emit('sureChoose', list);
this.cgDia = false;
}