vue2+Element表格实现跨页多选功能
在Vue2结合Element UI实现跨页多选功能,可以通过以下步骤实现:
- 使用
el-table
组件并开启row-key
属性。 - 使用
el-table-column
的type="selection"
来添加多选框。 - 利用
:reserve-selection="true"
属性来保持选中状态,即使换页后的数据项不在原页面中。
以下是一个简单的示例代码:
<template>
<el-table
:data="tableData"
style="width: 100%"
row-key="id"
:tree-props="{children: 'children'}"
@selection-change="handleSelectionChange"
:reserve-selection="true">
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<!-- 其他列 -->
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [], // 表格数据
multipleSelection: [], // 多选框选中的数据
};
},
methods: {
handleSelectionChange(val) {
this.multipleSelection = val;
},
// 其他方法,比如分页获取数据等
},
};
</script>
在这个示例中,row-key
绑定了每行数据的唯一键(假设每项数据都有一个id
属性),这样Vue就可以追踪每一行的选中状态。handleSelectionChange
方法用来更新multipleSelection
数组,它包含了当前选中的所有行。
注意:这个例子假设每个数据项都有一个唯一的id
字段。根据你的数据结构,你可能需要将row-key
绑定到不同的字段。
评论已关闭