el-table 做一个分页组件支持多选 并且可以获取选择内容 demo

好的，我可以帮你回答这个问题。首先，需要使用 element-ui 的 el-table 组件，设置分页和多选属性。然后，在表格中添加一个“选择”列，并在每一行中加入一个 checkbox，用于选择对应行的数据。最后，通过监听 el-table 的 selection-change 事件来获取选择的数据。

以下是一个简单的示例代码：

<template>
  <div>
    <el-table
      :data="tableData"
      :pagination="pagination"
      @selection-change="handleSelectionChange"
      :selectable="multiple"
      :show-header="true"
      style="width: 100%">
      <el-table-column type="selection" :selectable="selectable"></el-table-column>
      <el-table-column prop="name" label="Name"></el-table-column>
      <el-table-column prop="age" label="Age"></el-table-column>
      <el-table-column prop="address" label="Address"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: 'John', age: 18, address: 'New York' },
        { name: 'Peter', age: 22, address: 'London' },
        { name: 'Mary', age: 33, address: 'Paris' },
        { name: 'Mike', age: 40, address: 'Tokyo' }
      ],
      multiple: true,
      selectable: (row) => row.age < 30,
      pagination: {
        pageSize: 2,
        layout: 'total, sizes, prev, pager, next, jumper'
      },
      selectedRows: []
    }
  },
  methods: {
    handleSelectionChange(rows) {
      this.selectedRows = rows
      console.log('Selected rows:', this.selectedRows)
    }
  }
}
</script>

在这个示例中，我们设置了 el-table 的 pagination 属性来启用分页，并通过 multiple 属性设置了多选。我们还添加了一个“选择”列，并且通过 selectable 属性设置了哪些行可以被选择。最后，我们通过监听 selection-change 事件来获取选择的数据，并将其存储在 selectedRows 变量中。

注意，我们在 el-table-column 中添加了 :selectable="selectable" 属性，以便根据 selectable 函数的返回值来决定哪些行可以被选择。

希望这个示例可以帮助你实现一个带多选功能的 el-table 分页组件。