el-table同一行中嵌入多个el-input是无法改变
时间: 2023-08-14 20:02:49 浏览: 381
如果你在 `el-table` 的同一行中嵌入了多个 `el-input` 但是无法改变它们的值,可能是由于 `el-table` 的数据绑定机制导致的。`el-table` 是基于虚拟 DOM 实现的,当你在其中一个 `el-input` 中输入内容时,`el-table` 会重新渲染整个表格,这样就会导致你输入的内容被覆盖掉。
解决这个问题的方法是在 `el-table` 组件上使用 `:row-key` 属性,指定一列作为每一行的唯一标识符,这样 `el-table` 就能够正确地更新相应的行数据。此外,你还需要为每个 `el-input` 添加一个 `key` 属性,用来唯一标识它们,这样 `el-table` 才能正确地区分它们。例如:
```html
<el-table :data="tableData" :row-key="row => row.id">
<el-table-column label="姓名">
<template slot-scope="{row}">
<el-input v-model="row.name" :key="`${row.id}_name`"></el-input>
</template>
</el-table-column>
<el-table-column label="年龄">
<template slot-scope="{row}">
<el-input v-model="row.age" :key="`${row.id}_age`"></el-input>
</template>
</el-table-column>
</el-table>
```
在这个例子中,我们为每个 `el-input` 添加了一个唯一的 `key`,用来区分它们。这样,当你在其中一个 `el-input` 中输入内容时,`el-table` 就会正确地更新相应的行数据,而不会覆盖掉你输入的内容。
阅读全文