m0_62289618 2022-06-18 16:10 采纳率: 60%
浏览 890

在el-table中使用el-input-number时,一个输入框输入,影响到其他列变成统一的数据了

问题遇到的现象和发生背景

使用el-table遇到一个大坑,情况是这样的,有个人需求,el-table的列是动态生成绑定数据,在使用插槽scope时,行内嵌套el-input-number,一共有4行数据,当在其中一行的一列中输入数字后,这4行的这一列全部都变成相同的数据了,这到底是怎么回事呢?

问题相关代码,请勿粘贴截图
 <el-table :data="tblenergyList" style="width: 100%" border :key="itemKey">
      <el-table-column label="1月" v-if="arrayMonth.includes(1)">
        <template slot-scope="scope">
          <el-input-number v-model="scope.row.i1" :min="0" @blur="inputBlur(scope.row)"></el-input-number>
        </template>
      </el-table-column>
      <el-table-column label="2月" v-if="arrayMonth.includes(2)">
        <template slot-scope="scope">
          <el-input-number v-model="scope.row.i2" :min="0"></el-input-number>
        </template>
      </el-table-column>
      <el-table-column label="3月" v-if="arrayMonth.includes(3)">
        <template slot-scope="scope">
          <el-input-number v-model="scope.row.i3" :min="0"></el-input-number>
        </template>
      </el-table-column>
      <el-table-column label="4月" v-if="arrayMonth.includes(4)">
        <template slot-scope="scope">
          <el-input-number v-model="scope.row.i4" :min="0"></el-input-number>
        </template>
      </el-table-column>
      <el-table-column label="5月" v-if="arrayMonth.includes(5)">
        <template slot-scope="scope">
          <el-input-number v-model="scope.row.i5" :min="0"></el-input-number>
        </template>
      </el-table-column>
      <el-table-column label="6月" v-if="arrayMonth.includes(6)">
        <template slot-scope="scope">
          <el-input-number v-model="scope.row.i6" :min="0"></el-input-number>
        </template>
      </el-table-column>
      <el-table-column label="7月" v-if="arrayMonth.includes(7)">
        <template slot-scope="scope">
          <el-input-number v-model="scope.row.i7" :min="0"></el-input-number>
        </template>
      </el-table-column>
      <el-table-column label="8月" v-if="arrayMonth.includes(8)">
        <template slot-scope="scope">
          <el-input-number v-model="scope.row.i8" :min="0"></el-input-number>
        </template>
      </el-table-column>
      <el-table-column label="9月" v-if="arrayMonth.includes(9)">
        <template slot-scope="scope">
          <el-input-number v-model="scope.row.i9" :min="0"></el-input-number>
        </template>
      </el-table-column>
      <el-table-column label="10月" v-if="arrayMonth.includes(10)">
        <template slot-scope="scope">
          <el-input-number v-model="scope.row.i10" :min="0"></el-input-number>
        </template>
      </el-table-column>
      <el-table-column label="11月" v-if="arrayMonth.includes(11)">
        <template slot-scope="scope">
          <el-input-number v-model="scope.row.i11" :min="0"></el-input-number>
        </template>
      </el-table-column>
      <el-table-column label="12月" v-if="arrayMonth.includes(12)">
        <template slot-scope="scope">
          <el-input-number v-model="scope.row.i12" :min="0"></el-input-number>
        </template>
      </el-table-column>
    </el-table>

这里是初始化处理表格4行数据的
  let obj = {}
      this.arrayMonth.map(e => {
        this.$set(obj, 'i' + e, 0)
      });
      for (let i = 0; i <= 3; i++) {
        this.tblenergyList.push(obj)
      }
      console.log(this.tblenergyList);
运行结果及报错内容

img

我的解答思路和尝试过的方法

这个问题我真的不知道怎么解决,尝试this.tblenergyList.push(obj)这个语句变成this.tblenergyList=obj,也不行

我想要达到的结果

输入框输入后只有当前这一个变化

  • 写回答

1条回答 默认 最新

  • 你好!机器人 2022-06-18 17:00
    关注

    好像没你这个问题

    img

    img

    评论

报告相同问题?

问题事件

  • 创建了问题 6月18日

悬赏问题

  • ¥20 求数据集和代码#有偿答复
  • ¥15 关于下拉菜单选项关联的问题
  • ¥20 java-OJ-健康体检
  • ¥15 rs485的上拉下拉,不会对a-b<-200mv有影响吗,就是接受时,对判断逻辑0有影响吗
  • ¥15 使用phpstudy在云服务器上搭建个人网站
  • ¥15 应该如何判断含间隙的曲柄摇杆机构,轴与轴承是否发生了碰撞?
  • ¥15 vue3+express部署到nginx
  • ¥20 搭建pt1000三线制高精度测温电路
  • ¥15 使用Jdk8自带的算法,和Jdk11自带的加密结果会一样吗,不一样的话有什么解决方案,Jdk不能升级的情况
  • ¥15 画两个图 python或R