vue表格点击单元格修改数据怎么实现

Question

我是一个表格，左边第一列是名字，后面是日期，然后我点击某一个单元格，弹出一个框，可以在里面拿到当前这个单元格的数据，并且当前单元格式日期几号的，名字是谁的。然后修改单元格的数据发送给后端。最终刷新完成这个表格中的这个单元格数据更新。但是不知道有什么好办法可以点击单元格的时候获取到当前单元格的数据还有行和列的名称。

Answer 1

参考下面的方法，还望采纳：
代码如下：

<template>
  <div>
    <table>
      <tr v-for="(row, index) in rows" :key="index">
        <td v-for="(col, colIndex) in row" :key="colIndex" @click="editCell(index, colIndex)">{{ col }}</td>
      </tr>
    </table>
    <div v-if="showModal">
      <div>
        <label>当前单元格的数据：</label>
        <input v-model="currentCellData" />
      </div>
      <div>
        <label>行名称：</label>
        <input v-model="currentRowName" />
      </div>
      <div>
        <label>列名称：</label>
        <input v-model="currentColName" />
      </div>
      <button @click="saveChanges">保存修改</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      rows: [
        ['Name1', 'Date1', 'Data1'],
        ['Name2', 'Date2', 'Data2'],
        ['Name3', 'Date3', 'Data3']
      ],
      showModal: false,
      currentCellData: '',
      currentRowName: '',
      currentColName: '',
      currentRowIndex: 0,
      currentColIndex: 0
    }
  },
  methods: {
    editCell(rowIndex, colIndex) {
      this.showModal = true
      this.currentCellData = this.rows[rowIndex][colIndex]
      this.currentRowName = this.rows[rowIndex][0]
      this.currentColName = this.rows[0][colIndex]
      this.currentRowIndex = rowIndex
      this.currentColIndex = colIndex
    },
    saveChanges() {
      this.rows[this.currentRowIndex][this.currentColIndex] = this.currentCellData
      this.showModal = false
    }
  }
}
</script>