el-table找出当前单元格与对应的上下列的值

**EL-Table 中的表格数据获取**

在 EL-Table 中，经常需要根据当前选中行或列来获取相应的数据。例如，在一个表格中，我们可能需要根据当前选中的行来显示对应的详细信息，或根据当前选中的列来进行统计计算。在本文中，我们将介绍如何在 EL-Table 中找到当前单元格与对应的上下列的值。

###1. 使用 `row` 和 `column` 属性首先，我们可以使用 `row` 和 `column` 属性来获取当前选中的行和列。例如：

html<el-table :data="tableData" style="width:100%" @current-change="handleCurrentChange">
 <el-table-column prop="date" label="日期"></el-table-column>
 <el-table-column prop="name" label="姓名"></el-table-column>
 <el-table-column prop="address" label="地址"></el-table-column>
</el-table>

<script>
export default {
 data() {
 return {
 tableData: [
 { date: '2016-05-03', name: 'John', address: 'New York' },
 { date: '2016-05-04', name: 'Alice', address: 'Los Angeles' }
 ]
 };
 },
 methods: {
 handleCurrentChange(val) {
 console.log(val); // val 是当前选中的行 console.log(this.$refs.myTable.getCurrentColumn()); // 获取当前选中的列 }
 }
};
</script>

在上面的例子中，我们使用 `@current-change`事件来监听当前选中的行变化，然后通过 `this.$refs.myTable.getCurrentColumn()` 来获取当前选中的列。

###2. 使用 `getCurrentRow` 和 `getCurrentColumn` 方法除了使用 `row` 和 `column` 属性之外，我们还可以使用 `getCurrentRow` 和 `getCurrentColumn` 方法来获取当前选中的行和列。例如：

html<el-table :data="tableData" style="width:100%" ref="myTable">
 <el-table-column prop="date" label="日期"></el-table-column>
 <el-table-column prop="name" label="姓名"></el-table-column>
 <el-table-column prop="address" label="地址"></el-table-column>
</el-table>

<script>
export default {
 data() {
 return {
 tableData: [
 { date: '2016-05-03', name: 'John', address: 'New York' },
 { date: '2016-05-04', name: 'Alice', address: 'Los Angeles' }
 ]
 };
 },
 methods: {
 handleCurrentChange() {
 const row = this.$refs.myTable.getCurrentRow(); // 获取当前选中的行 const column = this.$refs.myTable.getCurrentColumn(); // 获取当前选中的列 console.log(row); // row 是当前选中的行 console.log(column); // column 是当前选中的列 }
 }
};
</script>

在上面的例子中，我们使用 `ref` 属性来获取 EL-Table 的实例，然后通过 `getCurrentRow` 和 `getCurrentColumn` 方法来获取当前选中的行和列。

###3. 使用 `row-key` 和 `column-key` 属性最后，我们可以使用 `row-key` 和 `column-key` 属性来指定行和列的唯一标识符。例如：

html<el-table :data="tableData" style="width:100%" row-key="id">
 <el-table-column prop="date" label="日期"></el-table-column>
 <el-table-column prop="name" label="姓名"></el-table-column>
 <el-table-column prop="address" label="地址"></el-table-column>
</el-table>

<script>
export default {
 data() {
 return {
 tableData: [
 { id:1, date: '2016-05-03', name: 'John', address: 'New York' },
 { id:2, date: '2016-05-04', name: 'Alice', address: 'Los Angeles' }
 ]
 };
 },
 methods: {
 handleCurrentChange(val) {
 console.log(val); // val 是当前选中的行 console.log(this.$refs.myTable.getCurrentColumn()); // 获取当前选中的列 }
 }
};
</script>

在上面的例子中，我们使用 `row-key` 属性来指定行的唯一标识符为 `id`，然后通过 `getCurrentRow` 和 `getCurrentColumn` 方法来获取当前选中的行和列。

综上所述，我们可以通过使用 `row` 和 `column` 属性、`getCurrentRow` 和 `getCurrentColumn` 方法以及 `row-key` 和 `column-key` 属性来在 EL-Table 中找到当前单元格与对应的上下列的值。