Vue中表格数据处理

最近在做一个后台项目，里面用到了大量的表格，在element动态添加表格数据的时候，会根据每行的id展示不同的数据。但是在没有后端的情况下啊，把数据放一个数组里面会出现错乱，比如我点击第二项的添加，第一项添加的数据也会显示出来，那么我们要怎么办呢？
思路：1、先创建一个大的数组，用于模拟后端数据库。
2、根据每一项的id不同，去大数组里面获取数据。
3、在添加的时候，根据id进行判断，只显示和当前id一样的数据
4、再添加的时候，把数据分别push进两个数组
话不多说 直接上代码

第一步在data中先定义两个数组

// 第一步
TotalData: [],//总数据
configure: [], //用于显示数据

第二、三步 根据不同的id 去获取数据 并展示

handleClick(row) { //配置限定值
	this.LimitValue = true
  	this.rows = row
    // 根据不同的fatherID获取不同的数据
      this.configure = [] //先把用于展示的数组清空
      if(this.TotalData.length !== 0){ //判断是否有数据
        this.TotalData.forEach(item => { //循环数组中里面的数据
          if(item.fatherId === row.id){ //通过id查找当前行的数据
            this.configure.push(item) //添加到展示的数组里
          }
        })
      }
    },

第四步 把添加的数据 push进两个数组

addline(){ // 配置限定值添加行
      // 清楚暂存区数据
      this.Stage = ""
      let configures = {
        name : this.rows.name,
        Valuetype : this.rows.Valuetype,
        id : this.configure.length+1,
        operator : '',
        index:'',
        fatherId : this.rows.id
      }
      this.configure.push(configures)//往展示的数组里添加数据
      this.TotalData.push(configures)//往存放所有数据的数组里添加数据
    },

最终效果
两条不同的数据

第一项配置限定值的表格

第二项配置限定值的表格

总结 ：没有什么技术难题，就是一个思路问题，主要的就是创建一个数组，用于模拟数据库，当然两个数组里面都是 [{},{}]的格式，然后在通过当前行的id进项判断。 这是没有后端的情况，如果有后端配合的话，直接通过当前行的id来和后端进行交互就OK了