el-table-column如何获取行数据的值

在Element UI的el-table组件中，你可以通过el-table-column的slot-scope属性（在Vue 2.x中）或者#default插槽的scope属性（在Vue 3.x中）来获取当前行的数据。以下是如何实现这一功能的详细步骤：

‌在el-table-column中定义点击事件处理器 ‌：

你需要在el-table-column的模板中定义一个按钮，并为该按钮添加一个点击事件处理器。在Vue 2.x中，你可以使用slot-scope属性来访问当前行的数据；在Vue 3.x中，则使用#default插槽的scope属性。
‌在事件处理器中通过参数获取当前行的数据对象 ‌：

点击事件处理器会接收到一个参数（在Vue 2.x中是scope，在Vue 3.x中也是scope），该参数包含了当前行的数据。你可以通过scope.row来访问这些数据。
‌使用获取到的当前行数据进行后续操作或展示 ‌：

一旦你获取到了当前行的数据，就可以根据需要进行后续的操作或展示，比如删除、编辑当前行的数据等。

以下是一个基于Vue 2.x的示例代码：

html 复制代码

<template>
  <el-table :data="tableData">
    <el-table-column prop="date" label="日期" width="180"></el-table-column>
    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
    <el-table-column label="操作" width="200" align="center">
      <template slot-scope="scope">
        <el-button type="primary" icon="el-icon-edit" circle @click="handleEdit(scope.row)"></el-button>
        <el-button type="danger" icon="el-icon-delete" circle @click="handleDelete(scope.row)"></el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { date: '2023-10-01', name: '张三' },
        { date: '2023-10-02', name: '李四' }
      ]
    };
  },
  methods: {
    handleEdit(row) {
      console.log('编辑当前行数据:', row);
      // 在这里添加编辑当前行数据的逻辑
    },
    handleDelete(row) {
      console.log('删除当前行数据:', row);
      // 在这里添加删除当前行数据的逻辑
    }
  }
};
</script>

如果你使用的是Vue 3.x，代码将略有不同，主要是将slot-scope替换为#default插槽的scope属性：

html 复制代码

<template>
  <el-table :data="tableData">
    <el-table-column prop="date" label="日期" width="180"></el-table-column>
    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
    <el-table-column label="操作" width="200" align="center">
      <template #default="scope">
        <el-button type="primary" icon="el-icon-edit" circle @click="handleEdit(scope.row)"></el-button>
        <el-button type="danger" icon="el-icon-delete" circle @click="handleDelete(scope.row)"></el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { date: '2023-10-01', name: '张三' },
        { date: '2023-10-02', name: '李四' }
      ]
    };
  },
  methods: {
    handleEdit(row) {
      console.log('编辑当前行数据:', row);
      // 在这里添加编辑当前行数据的逻辑
    },
    handleDelete(row) {
      console.log('删除当前行数据:', row);
      // 在这里添加删除当前行数据的逻辑
    }
  }
};
</script>

这两个示例都展示了如何在el-table-column中获取当前行的数据，并通过点击事件处理器进行后续操作。