vue2版本elementUI的table分页实现多选逻辑
1. 需求
我们需要在表格页上实现多选要求，该表格支持分页逻辑。
2. 认识属性
表格属性
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| data | 显示的数据 | array | — | — |
| row-key | 行数据的 Key，用来优化 Table 的渲染；在使用 reserve-selection 功能与显示树形数据时，该属性是必填的。类型为 String 时，支持多层访问：user.info.id，但不支持 user.info[0].id，此种情况请使用 Function。 | Function(row)/String | — | — |
表格事件
| 事件名 | 说明 | 参数 |
|---|---|---|
| selection-change | 当选择项发生变化时会触发该事件 | selection |
表格方法
| 方法名 | 说明 | 参数 |
|---|---|---|
| clearSelection | 用于多选表格，清空用户的选择 | — |
| toggleRowSelection | 用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中） | row, selected |
| toggleAllSelection | 用于多选表格，切换所有行的选中状态 | - |
表格列属性
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| type | 对应列的类型。如果设置了 selection 则显示多选框；如果设置了 index 则显示该行的索引（从 1 开始计算）；如果设置了 expand 则显示为一个可展开的按钮 | string | selection/index/expand | — |
| selectable | 仅对 type=selection 的列有效，类型为 Function，Function 的返回值用来决定这一行的 CheckBox 是否可以勾选 | Function(row, index) | — | — |
| reserve-selection | 仅对 type=selection 的列有效，类型为 Boolean，为 true 则会在数据更新之后保留之前选中的数据（需指定 row-key） | Boolean | — | false |
3. 具体代码
<template>
<div>
<el-table
v-if="tableVisible"
ref="multipleTable"
:data="tableData"
tooltip-effect="dark"
style="width: 100%"
row-key="id"
@selection-change="handleSelectionChange">
<el-table-column
:reserve-selection="true"
:selectable="judgeSelectable"
type="selection"
width="55">
</el-table-column>
<el-table-column
label="id"
width="120">
<template slot-scope="scope">{{ scope.row.date }}</template>
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="120">
</el-table-column>
</el-table>
<el-pagination
:current-page="pageNum"
:page-sizes="[10, 20, 50, 100]"
:page-size="pageSize"
layout="total, prev, pager, next, sizes, jumper"
:total="total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</div>
</template>
export default {
data() {
return {
tableData: [{
id: 1,
name: '王小虎1'
}, {
id: 2,
name: '王小虎2'
}, {
id: 3,
name: '王小虎3'
}, {
id: 4,
name: '王小虎4'
}, {
id: 5,
name: '王小虎5'
}, {
id: 6,
name: '王小虎6'
}, {
id: 7,
name: '王小虎7'
}],
multipleSelection: [],
total: 0,
pageSize: 10,
pageNum: 1,
tableVisible: true
}
},
created() {
this.initData();
},
methods: {
initData() {
this.getList();
this.getSelectedList();
},
getSelectedList() {
// 当拿到已选列表时，调用toggleSelection传入已选列表
},
judgeSelectable(row, index) {
// 用来区分是否可选
return Math.random() > 0.5;
},
toggleSelection(rows) {
if (rows) {
rows.forEach(row => {
this.$refs.multipleTable.toggleRowSelection(row);
});
} else {
this.$refs.multipleTable.clearSelection();
}
},
handleSelectionChange(val) {
this.multipleSelection = val;
},
getList() {
// 获取数据，更新tableData和total
},
// 分页size变化
handleSizeChange(val) {
this.pageSize = val;
this.getList();
},
// 当前页面变化
handleCurrentChange(val) {
this.pageNum = val;
this.getList();
},
// 必须这么处理
toggleSelection(rows) {
if (rows) {
rows.forEach(row => {
this.$refs.multipleTable.toggleRowSelection(row);
});
} else {
this.$refs.multipleTable.clearSelection();
}
},
// 批量导入或者其他场景下已选数据已更新，就重新处理下页面内容
regetData() {
this.total = 0;
this.pageNum = 1;
this.tableData = [];
this.multipleSelection = [];
this.tableVisible = false;
this.$nextTick(() => {
this.tableVisible = true;
this.initData();
})
}
}
}
4. 解读
分页不需要介绍，主要还是多选说一点。
- 表格上必须设置
row-key，该字段的值不可重复，这样让表格记住每个数据。 selection-change字段用来监听选择变化，因el-table未提供批量选中方法，故只能调组件上的toggleRowSelection方法一个一个选中。如果需要监听selection-change方法变更记录，最好还是防抖处理，避免初始化一个一个选中导致的数据异常。- el-table-column 使用
type值为 selection, 该组件上需要设置reserve-selection为 true，相关属性解说请看2中解释。属性selectable则是用来控制是否可选，这个业务功能也要了解下。 - 至于具体逻辑可以参考上面代码，有问题来找我。
| 求关注 |
|---|
 |