前端 element-UI table的多选id如何获得 代码演示

你好！感谢您的提问。

关于前端 element-UI table 的多选 id 如何获得，您可以使用 selection-change 事件来监听多选框的变化，并在方法中获取选中行的 id。示例代码如下：

<el-table :data="tableData" @selection-change="handleSelectionChange">
  <el-table-column type="selection"></el-table-column>
  <el-table-column prop="name" label="姓名"></el-table-column>
  <el-table-column prop="age" label="年龄"></el-table-column>
  <el-table-column prop="address" label="地址"></el-table-column>
</el-table>

...

methods: {
  handleSelectionChange(selection) {
    const ids = selection.map(item => item.id);
    console.log(ids);
  }
}

在这个示例中，我们使用了 selection-change 事件监听多选框的变化，方法中通过 selection 参数获取选中的行数组，再通过 map 方法将选中行数组转换为 id 数组。

希望这个回答能够帮到您，如果您有更多问题，欢迎继续提问。

相关问题

前端 element-UI table的多选id如何获得

你可以使用以下代码来获取 element-UI table 多选的 id：

<template>
  <div>
    <el-table
      :data="tableData"
      border
      style="width: 100%">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        prop="name"
        label="Name"
        width="180">
      </el-table-column>
      <el-table-column
        prop="age"
        label="Age"
        width="180">
      </el-table-column>
    </el-table>
    <button @click="getIds">Get Selected Ids</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          id: 1,
          name: 'John',
          age: 20
        },
        {
          id: 2,
          name: 'Mike',
          age: 25
        },
        {
          id: 3,
          name: 'Amy',
          age: 30
        }
      ],
      selectedIds: []
    }
  },
  methods: {
    getIds() {
      this.selectedIds = this.$refs.table.selection.map(item => item.id)
      console.log(this.selectedIds)
    }
  }
}
</script>

在这个例子中，我们使用 `$refs.table.selection` 来获取所有选中的行，然后通过映射函数获取每个选中行的 `id` 值，并将它们存储在 `selectedIds` 中。

element-ui table多选CheckBox参数解析

当使用 Element UI 的 table 组件进行多选时，可以在列定义中设置 `type` 属性为 `selection`，这将会在表格中显示出一个复选框列。当用户勾选了其中的某些行时，可以通过 `@selection-change` 事件来获取当前选中的行数据，如下所示：

<el-table
  :data="tableData"
  @selection-change="handleSelectionChange">
  <el-table-column
    type="selection"
    width="55">
  </el-table-column>
  <el-table-column
    prop="name"
    label="姓名">
  </el-table-column>
  <el-table-column
    prop="age"
    label="年龄">
  </el-table-column>
</el-table>

methods: {
  handleSelectionChange(selection) {
    console.log(selection)
  }
}

在 `handleSelectionChange` 方法中，`selection` 参数是一个包含已选择行数据的数组。如果需要获取选中行的索引，可以在 `el-table` 上设置 `row-key` 属性，并在 `selection-change` 事件中通过 `selection.map(item => this.$refs.table.$data.indexOf(item))` 获取。