解决iview Table组件无单元格点击事件问题

iview Table组件实现单元格点击切换输入框和文本功能

iview的Table组件本身没有提供点击单元格触发的事件。为了实现点击单元格进行编辑，我们需要手动添加点击事件来模拟该功能。

以下代码示例展示了如何实现点击单元格切换输入框和文本的功能：

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

代码解释：

editingCell 对象: 用于记录当前正在编辑的单元格的行索引 (rowIndex) 和列索引 (columnIndex)。
isEditing 方法: 判断某个单元格是否处于编辑状态。
handleCellClick 方法: 处理单元格点击事件，将点击的单元格信息记录到 editingCell 中，从而控制该单元格切换到编辑状态（显示输入框）。
handleCellBlur 方法: 处理输入框失去焦点事件，将 editingCell 重置，使单元格回到非编辑状态（显示文本）。

需要注意的是:

以上代码仅提供基础的单元格点击编辑功能，未涉及数据保存、编辑冲突等复杂逻辑。
根据实际需求，您可能需要对代码进行扩展和调整，例如添加数据校验、异步更新数据等功能。

希望以上信息能够帮助您解决问题。如果您还有其他疑问，请随时提出。