这种列表表单数据,要求填写的值,无论在调取后台接口:搜索筛选项、分页之后,依旧可以保留,那就需要每次输入框失焦后,存储当前填写的值
// 搜索
search() {
this.saveCurrentData(); //每次离开当前数据时 先存储
},
// 分页
handleSizeChange(val) {
this.saveCurrentData(); //每次离开当前数据时 先存储
},
changePage(val) {
this.saveCurrentData(); //每次离开当前数据时 先存储
},
//每次离开当前数据时 先存储
saveCurrentData () {
var that = this;
//点击分页,搜索的时候 需要把新获取的数据追加上去,或者把之前已经存在的数据更新
//先判断当前需要存储的数据 是否有跟存储里面的数据相同的,有就把当前最新的数据赋给它
if (that.dataForm2.tableData.length && that.dataFormAll2.tableData.length) {
that.dataFormAll2.tableData && that.dataFormAll2.tableData.map((el,index) =>
{
that.dataForm2.tableData && that.dataForm2.tableData.map((el2,index2) => {
if (el.id == el2.id) {
el = {...el,...el2}
el.rowList = el2.rowList;
}
})
this.$set(that.dataFormAll2.tableData, index, el)
})
that.dataFormAll2={
tableData: cloneObjFunction(that.dataFormAll2.tableData)
}
}
// 上述条件之外的,需要把all数据里面没有的 最新的追加进去
if (that.dataForm2.tableData.length) {
let newArr = that.dataForm2.tableData.filter(function (item) {
return that.dataFormAll2.tableData.every(function (item1) {
return item.id != item1.id;
})
});
that.dataFormAll2.tableData.push(...newArr)
}
console.log(that.dataFormAll2.tableData)
},
// 重置
reset() {
this.saveCurrentData(); //每次离开当前数据时 先存储
},
//获取列表数据
getTableList(flag) {
var that = this
var params = {
pageNum: that.pageNum,
pageSize: that.pageSize,
};
getList(params).then(res => {
if (res.code == 0) {
var data = res.data.pageData.list
that.dataForm2={
tableData: data
}
//证明点击过分页、搜索等按钮,需要回填之前填写的数据
if (that.dataFormAll2.tableData.length) {
that.dataForm2.tableData && that.dataForm2.tableData.map((el,index) => {
that.dataFormAll2.tableData &&
that.dataFormAll2.tableData.map((el2,index2) => {
if (el.id == el2.id) {
el.rowList = el2.rowList;
}
})
this.$set(that.dataForm2.tableData, index, el)
})
that.dataForm2={
tableData: cloneObjFunction(that.dataForm2.tableData)
}
}
that.handleInputBlur(flag);
} else {
}
}).catch(err => {
});
},
// 输入框失焦
handleInputBlur(flag) {
var that = this;
if (flag != 'init') {
that.saveCurrentData(); //每次离开当前数据时 先存储
}
},