vue-elementui-el-table列表表单数据回填(在点击过分页、搜索查询后依旧回填之前填写的数据)

 这种列表表单数据,要求填写的值,无论在调取后台接口:搜索筛选项、分页之后,依旧可以保留,那就需要每次输入框失焦后,存储当前填写的值


      // 搜索
      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(); //每次离开当前数据时  先存储
        }
      },
 

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

仰望半月

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值