vue3 获取el-table复选框选中行

在Vue 3中，要获取`<el-table>`复选框选中的行，你可以使用`ref`引用和`$refs`访问表格实例。以下是一个示例：

1. 在模板中，给`<el-table>`添加`ref`属性：

<template>
  <el-table
    ref="tableRef"
    :data="tableData"
    style="width: 100%">
    <!-- 表格列配置 -->
  </el-table>
</template>

2. 在组件中，使用`$refs`来访问表格实例，并使用`getSelection()`方法获取选中的行：

<script>
export default {
  data() {
    return {
      tableData: [], // 表格数据
    };
  },
  methods: {
    getSelectedRows() {
      const selectedRows = this.$refs.tableRef.getSelection();
      console.log(selectedRows); // 打印选中的行数据
    },
  },
};
</script>

这样，当你调用`getSelectedRows()`方法时，就可以获取到`<el-table>`复选框选中的行数据。记得将示例中的`<el-table>`和`tableData`替换为你自己的实际代码。

相关问题

vue el-table 复选框选中获取id值

Vue.js 的 `el-table` 组件中的复选框通常通过 `selection` 或 `row-selection` 属性来实现选择功能。当你需要获取选中的行ID时，可以使用 `@selection-change` 事件处理程序，该事件会在用户完成一次选择操作后触发，传递给函数的是一个 Selection 对象。

首先，在 Vue 模板上绑定一个变量来保存选中的数据，例如：

<template>
  <el-table :data="tableData" row-key="id" selection-mode="multiple">
    <!-- ... 表格列 ... -->
    <el-table-column type="selection" width="55"></el-table-column>
    <!-- ... 其他列 ... -->
    <el-table-column label="操作" width="100">
      <template slot-scope="scope">
        <el-checkbox @change="handleCheckboxChange(scope.$index, scope.row.id)"></el-checkbox>
      </template>
    </el-table-column>
  </el-table>
</template>

然后，在你的组件脚本部分定义 `handleCheckboxChange` 函数，它接收当前行的索引和ID作为参数：

export default {
  data() {
    return {
      tableData: [], // 假设这是你的表格数据数组
      selectedIds: [] // 存储选中的行ID
    };
  },
  methods: {
    handleCheckboxChange(index, id) {
      if (this.selectedIds.includes(id)) {
        this.selectedIds.splice(this.selectedIds.indexOf(id), 1);
      } else {
        this.selectedIds.push(id);
      }
    }
  }
}

当用户点击复选框时，这个函数会更新 `selectedIds` 数组，你可以在这个列表中获取到所有的已选中行ID。如果需要实时获取当前状态下的ID，可以在模板内直接引用 `selectedIds`。

el-table获取复选框选中行数据

要获取 `el-table` 中复选框选中的行数据，可以使用 `selection-change` 事件和 `getSelection()` 方法。以下是一个示例代码：

<template>
  <div>
    <el-table :data="tableData" @selection-change="handleSelectionChange">
      <el-table-column type="selection"></el-table-column>
      <!-- 其他列定义 -->
    </el-table>
    <button @click="getSelectedRows">获取选中行数据</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        // 表格数据
      ],
      selectedRows: [] // 存储选中的行数据
    };
  },
  methods: {
    handleSelectionChange(selection) {
      this.selectedRows = selection;
    },
    getSelectedRows() {
      console.log(this.selectedRows);
      // 在这里可以对选中的行数据进行处理
    }
  }
};
</script>

在这个示例中，我们使用 `el-table` 组件展示表格数据，并在表格中添加了一个复选框列（通过 `type="selection"` 实现）。通过 `@selection-change` 监听复选框选中的变化，并将选中的行数据保存在 `selectedRows` 属性中。

在模板中，我们添加了一个按钮，通过 `@click` 事件触发 `getSelectedRows` 方法，该方法用于获取选中的行数据并进行处理。你可以根据实际需求对选中的行数据进行相应的操作。

请根据实际情况调整代码，并根据需要在按钮点击事件中处理选中的行数据。