javascript

el-input-number修改数值失效的问题

一次在项目中，发现el-input-number无法输入，查阅了相关文档，发现可能是组件层级过深导致视图无法刷新。解决办法是在el-input-number上绑定@change="changeVal($event)"

1
2
3
4
5
6
7
8
9
10
<el-table-column slot="operationPrice" label="数量"  width="150">
    <template slot-scope="scope">
        <el-input-number v-model="scope.row.num"  :precision="0" :min="1" label="描述文字" @change="changeVal($event)">
        </el-input-number>
    </template>
</el-table-column>

changeVal() {
      this.$forceUpdate();
}

如果上述方法无效，可以尝试以下方法：

1
2
3
4
tableData = []
res.list.forEach((row)=>{
  tableData.push(JSON.parse(JSON.stringify(row)))  // JSON.parse(JSON.stringify(row)) 深拷贝
})

同理：input框有时候会无法输入进去

解决办法：

1
2
3
4
5
<el-input v-model.number="form.frm_order_no" placeholder="订单号" @input="orderNoChange" />
 
orderNoChange() {
   this.$forceUpdate();
}