el-table中使用inputNumber,只能点击一次?

541 阅读1分钟

问题描述

  • 打印列表表格中使用计数器来调整打印份数,只能点击一次

image.png

  • 代码如下
<el-table :data="tableData" border stripe>
    <el-table-column type="selection" align="center" />
    <el-table-column prop="baoGaoID" label="报告ID" align="center" />
    <el-table-column prop="num" label="打印份数" width="220" align="center">
      <template slot-scope="scope">
        <el-input-number
          v-model="scope.row.num"
          label="份数"
          :min="1"
          :max="3"
          :step="1"
        >
        </el-input-number>
      </template>
    </el-table-column>
</el-table>
mounted() {
    // 添加打印份数属性
    this.printList.forEach((item) => {
      item.num = 1
      this.tableData.push(item);
    });
},

问题原因

image.png

解决方法

// 改成Vue.set(object, propertyName, value)就可以是响应式的了
this.printList.forEach(item => {
    // item.num = 1  
    this.$set(item,'num',1)   
})