el-tabel嵌套input输入框,回车键跳转同一列下一行
在使用el-table
嵌套input
输入框时,若要实现回车键在同一列的不同行间跳转,可以通过监听输入框的keyup
事件来实现。以下是一个简单的实现示例:
<template>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="date" label="日期" width="180"> </el-table-column>
<el-table-column prop="name" label="姓名" width="180"> </el-table-column>
<el-table-column label="成绩">
<template slot-scope="scope">
<el-input
:ref="'input' + scope.$index"
v-model="scope.row.score"
@keyup.native.enter="jumpToNextRow(scope.$index, $event)"
></el-input>
</template>
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ date: '2016-05-02', name: '张三', score: '100' },
{ date: '2016-05-04', name: '李四', score: '98' },
// ...更多数据
],
};
},
methods: {
jumpToNextRow(index, event) {
const inputs = this.$refs['input'];
const nextIndex = index + 1;
if (nextIndex < inputs.length) {
inputs[nextIndex].focus();
}
},
},
};
</script>
在这个例子中,我们使用了ref
属性来为每个input
组件设置一个唯一的引用。在el-table-column
中,我们通过一个template slot-scope
来创建输入框,并监听keyup.enter
事件。当用户在输入框中按下回车键时,jumpToNextRow
方法会被调用,并将焦点移动到下一行的输入框上。如果当前是最后一行,则不做任何操作或者可以选择循环到第一行。
评论已关闭