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方法用于停止编辑模式。

请确保在合适的位置使用该组件,并根据您的实际需求和项目的结构进行适当的修改和配置。如果仍然遇到问题,请提供更多的代码和错误信息,以便我们进一步帮助您解决。

Vue iView 表格单行编辑实现:完整示例及代码解析

原文地址: http://www.cveoy.top/t/topic/pbK 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录