element table多选只能选中当前页数据_element-ui里的el-table 前端分页

如果你使用的是 element-ui 的 el-table 组件，并且开启了前端分页，那么默认情况下多选只能选中当前页的数据。

这是因为 el-table 组件默认只渲染当前页的数据，而不是全部数据。如果你想要在多个页面之间进行多选，你需要在 el-table 组件中添加一个自定义的多选列，并且在数据中添加一个属性来表示是否选中。

以下是一个示例代码：

<el-table :data="tableData" :span-method="rowSpanMethod" v-loading="loading">
  <el-table-column type="selection" width="55">
    <template slot-scope="{ row }">
      <el-checkbox v-model="row.selected"></el-checkbox>
    </template>
  </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>

export default {
  data() {
    return {
      tableData: [
        { name: 'John', age: 18, address: 'New York', selected: false },
        { name: 'Sarah', age: 22, address: 'London', selected: false },
        { name: 'Tom', age: 25, address: 'Paris', selected: false },
        { name: 'Jane', age: 30, address: 'Tokyo', selected: false },
      ],
      loading: false,
    };
  },
  methods: {
    rowSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        const rowSpan = this.getRowSpan(row, 'selected');
        if (rowSpan > 1) {
          return {
            rowspan: rowSpan,
            colspan: 1,
          };
        }
      }
    },
    getRowSpan(row, prop) {
      let rowSpan = 1;
      for (let i = this.tableData.indexOf(row) + 1; i < this.tableData.length; i++) {
        if (this.tableData[i][prop] === row[prop]) {
          rowSpan++;
        } else {
          break;
        }
      }
      return rowSpan;
    },
  },
};

在这个示例中，我们添加了一个名为 `selected` 的属性来表示每一行是否被选中。我们通过在 el-table-column 中添加一个自定义的列来实现多选功能，然后在模板中使用 el-checkbox 组件来绑定每一行的选中状态。我们还使用了一个自定义的 rowSpanMethod 方法来处理多选列的行合并，以便在表格中显示选中的行。