一招学会：轻松获取Vue中El-Table-Column当前行数据

前端

2024-01-20 07:41:13

获取当前行数据：El-Table-Column 组件的强大功能

作为 Vue 生态系统中不可或缺的组成部分，El-Table-Column 组件为 Vue 应用程序中的数据呈现和管理提供了至关重要的功能。凭借其强大的特性，您可以轻松创建和操作表格，获取当前行的数据也变得前所未有的便捷。

揭秘 El-Table-Column 获取当前行数据的秘密

@row-click 事件侦听器：

监听表格行被点击时的事件。
在事件处理函数中，您可以获取当前行的所有数据。

$index 属性：

表示当前行的索引。
可以使用它来获取当前行的特定数据。

动手实践：获取当前行数据的真谛

掌握理论知识后，让我们通过一个实际例子来巩固您的理解：

<template>
  <el-table :data="tableData">
    <el-table-column :index="true" width="100">
      <template slot-scope="scope">
        {{ scope.row.name }}
      </template>
    </el-table-column>
    <el-table-column label="Age" width="100">
      <template slot-scope="scope">
        {{ scope.row.age }}
      </template>
    </el-table-column>
    <el-table-column label="Action" width="100">
      <template slot-scope="scope">
        <el-button @click="handleRowClick(scope.row)">获取数据</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: 'John', age: 30 },
        { name: 'Jane', age: 25 },
        { name: 'Jack', age: 40 }
      ]
    }
  },
  methods: {
    handleRowClick(row) {
      console.log(row);
    }
  }
}
</script>