如果你使用的是 element-ui 的 el-table 组件，并且开启了前端分页，那么默认情况下多选只能选中当前页的数据。
这是因为 el-table 组件默认只渲染当前页的数据，而不是全部数据。如果你想要在多个页面之间进行多选，你需要在 el-table 组件中添加一个自定义的多选列，并且在数据中添加一个属性来表示是否选中。
以下是一个示例代码：
```html
<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>
```
```javascript
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 方法来处理多选列的行合并，以便在表格中显示选中的行。
3973
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
