Vue+iView实现可编辑表格：点击单元格即可编辑

在前端开发中，表格组件的使用非常普遍。为了提升用户体验，我们经常需要实现可编辑表格的功能，让用户可以直接在表格中修改数据。

本文将介绍如何使用Vue和iView UI库来创建一个可编辑表格，用户只需点击单元格即可进行编辑。

1. 组件代码

以下是完整的Vue组件代码：

<template>
  <div>
    <Table :columns='columns' :data='tableData'>
      <template slot-scope='{ row, column, $index }'>
        <span v-if='$index !== editIndex' @click='handleCellClick($index, column._index)'>{{ row[column.key] }}</span>
        <Input v-else v-model='tableData[Math.floor(editIndex / columns.length)][column.key]' @on-blur='handleCellBlur' />
      </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' }
      ],
      editIndex: -1
    };
  },
  methods: {
    handleCellClick(rowIndex, columnIndex) {
      this.editIndex = rowIndex * this.columns.length + columnIndex;
    },
    handleCellBlur() {
      this.editIndex = -1;
    }
  }
};
</script>

2. 代码解析

模板部分:
- 使用 iview 的 Table 组件展示数据。
- 使用 slot-scope 获取每一行的数据、列信息和索引。
- 根据 editIndex 判断当前单元格是否处于编辑状态，如果是则显示 Input 组件，否则显示文本。
脚本部分:
- 引入 Table 和 Input 组件。
- tableData 存储表格数据。
- columns 定义表格列信息。
- editIndex 用于记录当前编辑的单元格索引，初始值为 -1，表示没有单元格处于编辑状态。
- handleCellClick 方法计算点击单元格的索引，并更新 editIndex。
- handleCellBlur 方法在 Input 组件失去焦点时将 editIndex 恢复为 -1，结束编辑状态。

3. 使用说明

确保已正确安装 vue 和 iview。
将上述代码复制到您的 Vue 组件文件中。
根据实际需求修改表格数据和列信息。

4. 总结

本文介绍了如何使用 Vue 和 iView UI 库实现一个简单的可编辑表格。通过该示例，您可以学习如何使用 Table 组件、slot-scope、v-model 等语法来实现交互功能。您可以根据实际需求对代码进行扩展，例如添加数据校验、保存按钮等功能，以满足更复杂的业务场景。