vue3项目中用element的数字输入框避雷：一个输入框值改变，影响所有都变？

最新推荐文章于 2025-03-17 16:10:35 发布

桃桃泡泡

最新推荐文章于 2025-03-17 16:10:35 发布

阅读量1.8k

点赞数 3

文章标签： vue.js elementui javascript

本文链接：https://blog.youkuaiyun.com/weixin_56541403/article/details/128144541

版权

本文介绍了一种使用自定义模板的方法来解决表格中数字输入框联动变更的问题，并提供了一个具体的实现案例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 引用表格时，自定义表格内容，用<template #default="scope"></template>

2.引用数字输入框，刚开始发现改变一个输入框的值，所有输入框的值跟着一起变，后来加上了<template #default="scope">，然后设置<el-input-number v-model="scope.row.volume">，就可以解决改变一个输入框引起所有都变的问题了。

//正确代码
<el-table :data="storetableData" style="width: 100%">
            <el-table-column prop="buffer" label="存储" width="180" />
            <el-table-column prop="mold" label="类型" width="180">
              <template #default="scope">
                <el-select v-model="scope.row.mold" class="m-2" placeholder="通用型云盘" size="small">
                  <el-option v-for="item in moldoptions" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </template>
            </el-table-column>
            <el-table-column prop="volume" label="容量">
              <template #default="scope">
                <el-input-number v-model="scope.row.volnum" :min="0" :max="100" :step="10" size="small" controls-position="right" />
              </template>
            </el-table-column>
            <el-table-column prop="amount" label="数量" />
            <el-table-column prop="overall" label="总性能" />
          </el-table>



//数据
const storetableData = [
  {
    buffer: '系统盘',
    mold: '通用型云硬盘',
    volume: '10',
    amount: '1',
    overall: ''
  },
  {
    buffer: '系统盘',
    mold: '通用型云硬盘',
    volume: '20',
    amount: '2',
    overall: ''
  }
]