elementUI 怎么获取点击了表格的第几行第几列

可以使用 elementUI 的表格事件来获取点击的行和列。

例如，在表格中绑定一个 row-click 事件：

<el-table @row-click="handleRowClick">
  <!-- 表格内容 -->
</el-table>

在 methods 中定义 handleRowClick 方法：

methods: {
  handleRowClick(row, column, event) {
    console.log(row) // 点击的行数据
    console.log(column.property) // 点击的列属性名
    console.log(column.label) // 点击的列标题
    console.log(event) // 原生的 click 事件
  }
}

其中，row 表示点击的行数据，column 表示点击的列数据，event 表示原生的 click 事件。

可以通过 column.property 来获取点击的列属性名，通过 column.label 来获取点击的列标题。如果不需要获取列数据，可以省略 column 参数。

相关问题

elementui table合并表格第二列相同的数据

要实现 element-ui table 合并第二列相同的数据，需要使用 `span-method` 属性和 `Table-column` 的 `prop` 属性。

首先，在 `Table` 组件中，使用 `span-method` 属性来定义合并规则：

<el-table :data="tableData" :span-method="mergeRows">
  ...
</el-table>

然后，在 `methods` 中定义合并规则，可以使用 `row` 和 `column` 参数来获取当前单元格的行和列信息，进而判断是否需要合并。

methods: {
  mergeRows(row, column, rowIndex, columnIndex) {
    if (columnIndex === 1) {
      // 判断当前列是否为第二列
      const rowSpan = this.getRowSpan(row, column, rowIndex, columnIndex);
      if (rowSpan === 1) {
        // 如果当前单元格不需要合并，返回 { rowspan: 1, colspan: 1 }
        return { rowspan: 1, colspan: 1 };
      } else {
        // 如果当前单元格需要合并，返回 { rowspan: rowSpan, colspan: 1 }
        return { rowspan: rowSpan, colspan: 1 };
      }
    }
  },
  getRowSpan(row, column, rowIndex, columnIndex) {
    // 获取当前单元格的值
    const currentValue = row[column.property];
    // 定义合并行数
    let rowSpan = 1;
    // 遍历当前列的上方单元格
    for (let i = rowIndex - 1; i >= 0; i--) {
      const prevRow = this.tableData[i];
      // 如果上方单元格的值与当前单元格的值相等，行数加一
      if (prevRow[column.property] === currentValue) {
        rowSpan++;
      } else {
        // 如果上方单元格的值与当前单元格的值不相等，停止遍历
        break;
      }
    }
    return rowSpan;
  }
}

上面的代码中，`getRowSpan` 方法用来获取当前单元格需要合并的行数，遍历当前列的上方单元格，如果上方单元格的值与当前单元格的值相等，则行数加一。最后，返回合并后的行数。

最后，还需要在第二列的 `Table-column` 中设置 `prop` 属性，表示该列的数据源来自于表格数据中的哪个字段。

<el-table-column label="第二列" prop="column2" />

这样，就可以实现 element-ui table 合并第二列相同的数据了。

elementui表格点击按钮获取id

如果你是在 ElementUI 的表格中，可以通过在表格中添加一个列，然后在这一列中放置一个按钮来实现获取 ID 的操作。你可以在按钮的 `click` 事件中调用一个方法，将当前行的 ID 作为参数传递给该方法。以下是一个示例代码：

<template>
  <el-table :data="tableData">
    <el-table-column prop="id" label="ID"></el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.row.id)">获取ID</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { id: 1, name: '张三', age: 20 },
        { id: 2, name: '李四', age: 22 },
        { id: 3, name: '王五', age: 24 }
      ]
    };
  },
  methods: {
    handleClick(id) {
      console.log('当前行的ID为：', id);
    }
  }
};
</script>

在上面的示例中，我们在表格中添加了一个列，该列包含一个按钮，按钮的 `click` 事件中调用了 `handleClick` 方法，并将当前行的 ID 作为参数传递给该方法。在 `handleClick` 方法中，我们可以通过 `id` 参数获取到当前行的 ID，并进行后续操作。