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

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

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


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

你可能感兴趣的:(vue.js,elementui,javascript)