el-table 里的 el-input 无法输入
时间: 2023-11-07 15:48:56 浏览: 108
在el-table中使用el-input时,如果无法输入,可能是由于使用了错误的语法或者缺少必要的slot-scope属性。 在给el-input绑定v-model时,应该使用scope.row来访问el-table的每一行数据,例如:v-model="scope.row.name"。
如果el-input的值回显后无法修改,可能是由于没有正确绑定v-model或者在代码中没有处理input事件。建议检查一下代码中是否正确绑定了v-model,并且在el-input中添加@input事件来处理输入。
相关问题
el-table嵌套el-input不能输入
el-table嵌套el-input不能输入的问题可能是由于以下原因导致的:
1. el-input组件没有绑定双向响应式数据(v-model)。
2. 组件嵌套太深还是该组件是一个坑(具体原因不清楚,只知道解决方法)。
解决方案如下:
1. 在data中定义一个变量,然后在el-input组件中使用v-model进行双向数据绑定,这样子就会解决el-input组件无法输入的问题了。
2. 将el-input组件放在el-table组件外部,或者使用其他组件代替el-input组件。
以下是两种解决方案的代码示例:
1. 在el-table中使用v-model进行双向数据绑定
```html
<el-table :data="tableData">
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄">
<template slot-scope="scope">
<el-input v-model="scope.row.age"></el-input>
</template>
</el-table-column>
</el-table>
```
2. 将el-input组件放在el-table组件外部
```html
<el-table :data="tableData">
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄">
<template slot-scope="scope">
{{ scope.row.age }}
</template>
</el-table-column>
</el-table>
<el-input v-model="inputValue"></el-input>
```
el-table中嵌入el-input但是无法输入
如果你在 `el-table` 中嵌入了 `el-input` 但是无法输入,可能是由于 `el-table` 的滚动条和 `el-input` 的焦点冲突导致的。你可以尝试在 `el-table` 上添加 `@click.native` 事件,然后在事件处理程序中使用 `$refs` 获取 `el-input` 并手动聚焦它,例如:
```html
<el-table @click.native="$refs.input.focus()">
<el-table-column prop="name">
<template slot-scope="{row}">
<el-input ref="input" v-model="row.name"></el-input>
</template>
</el-table-column>
</el-table>
```
这样,当你点击 `el-table` 时,就会自动聚焦到相应的 `el-input` 中,然后你就可以开始输入了。