在vue和element-ui的table中实现分页复选功能

在Vue和Element UI的Table组件中实现分页复选功能，可以按照以下步骤进行操作：

1. 在Vue组件中引入Element UI的Table和Checkbox组件：

import { Table, Checkbox } from 'element-ui';

2. 在data中定义需要用到的变量：

data() {
  return {
    // 表格数据
    tableData: [],
    // 选中的行数据
    selectedRows: [],
    // 是否全选
    isAllSelected: false
  }
}

3. 在模板中使用Table和Checkbox组件，并设置相应属性和事件：

<template>
  <div>
    <el-table :data="tableData" @row-click="handleRowClick">
      <el-table-column type="selection" width="55">
        <template slot-scope="scope">
          <el-checkbox v-model="selectedRows" :label="scope.row" @change="handleCheckboxChange"></el-checkbox>
        </template>
      </el-table-column>
      <!-- 其他列定义-->
    </el-table>
  </div>
</template>

4. 在methods中定义事件处理函数：

methods: {
  // 单击行选中/取消选中
  handleRowClick(row) {
    const index = this.selectedRows.indexOf(row);
    if (index > -1) {
      this.selectedRows.splice(index, 1);
    } else {
      this.selectedRows.push(row);
    }
  },
  // 全选/取消全选
  handleCheckboxChange(value) {
    if (value.length === this.tableData.length) {
      this.isAllSelected = true;
    } else {
      this.isAllSelected = false;
    }
  }
}

5. 在模板中使用全选Checkbox，并绑定isAllSelected属性：

<el-checkbox v-model="isAllSelected" @change="handleSelectAllChange">全选</el-checkbox>

6. 在methods中定义全选Checkbox的 change 事件：

methods: {
  // 全选/取消全选
  handleSelectAllChange(value) {
    if (value) {
      this.selectedRows = [...this.tableData];
    } else {
      this.selectedRows = [];
    }
  }
}

以上就是在Vue和Element UI的Table中实现分页复选功能的步骤。通过监听行点击事件，可以实现点击行选中/取消选中的功能；通过绑定Checkbox的v-model和change事件，可以实现全选功能；通过管理选中的行数据，可以获取用户选择的数据。