我是一个表格，左边第一列是名字，后面是日期，然后我点击某一个单元格，弹出一个框，可以在里面拿到当前这个单元格的数据，并且当前单元格式日期几号的，名字是谁的。然后修改单元格的数据发送给后端。最终刷新完成这个表格中的这个单元格数据更新。但是不知道有什么好办法可以点击单元格的时候获取到当前单元格的数据还有行和列的名称。
参考下面的方法，还望采纳：
代码如下：
<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>
主要是 点击 时你需要 传递 当前点击行的数据（比如:id ,各个属性的值）
不知道你这个问题是否已经解决, 如果还没有解决的话: