Vue iView 表格单行编辑实现:完整示例及代码解析
Vue iView 表格单行编辑实现:完整示例及代码解析
非常抱歉,看来在上述示例中可能存在一些问题。我来修正一下代码并提供一个完整的可运行案例。
首先,请确保已正确引入Vue、iview和相关的依赖。
<template>
<div>
<Table :columns='columns' :data='tableData'>
<template slot-scope='{ row, column, $index }'>
<span v-if='!isEditing($index)' @click='startEditing($index)'>{{ row[column.key] }}</span>
<Input v-else v-model='tableData[$index][column.key]' @on-blur='stopEditing($index)' />
</template>
</Table>
</div>
</template>
<script>
import { Table, Input } from 'iview';
export default {
components: {
Table,
Input
},
data() {
return {
tableData: [
{ name: 'John', age: 25 },
{ name: 'Jane', age: 30 },
{ name: 'Doe', age: 35 }
],
columns: [
{ title: 'Name', key: 'name' },
{ title: 'Age', key: 'age' }
],
editingIndex: -1
};
},
methods: {
isEditing(index) {
return this.editingIndex === index;
},
startEditing(index) {
this.editingIndex = index;
},
stopEditing(index) {
this.editingIndex = -1;
}
}
};
</script>
在上述代码中,我们使用了isEditing方法来判断某行是否处于编辑状态,startEditing方法用于启动编辑模式,stopEditing方法用于停止编辑模式。
请确保在合适的位置使用该组件,并根据您的实际需求和项目的结构进行适当的修改和配置。如果仍然遇到问题,请提供更多的代码和错误信息,以便我们进一步帮助您解决。
原文地址: http://www.cveoy.top/t/topic/pbK 著作权归作者所有。请勿转载和采集!