vue3.0的el-table的多选切换分页保留选中的数据

本文介绍了如何在Vue项目中使用Element-UI的表格组件,通过设置`reserve-selection`属性为`true`来保留选择状态,并通过`row-key`设置唯一标识以确保选中状态的正确性。在TS部分展示了`handleSelectionChange`方法用于处理选择变化,以及`getRowKey`方法返回每行的用户ID作为唯一键。
摘要由CSDN通过智能技术生成

在这里插入图片描述
在这里插入图片描述
1.在selection行加设置属性reserve-selection为true
2.在el-table 设置row-key

            <el-table :data="list" @selection-change="handleSelectionChange"
                class="mt-16 factory-table normal-size" v-loading="loading" :row-key="getRowKey">
                <template #empty>
                    <empty-box class="mt-44" />
                </template>
                <el-table-column type="selection" width="70" :reserve-selection="true"/>
                <el-table-column prop="avatar" label="头像" />
            </el-table>

ts 设置row-key 的值

const handleSelectionChange = (val: any) => {
    multipleSelection.value = val
}
const getRowKey = (row: any) => {
    return row.user_id
}
  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
`vue-seamless-scroll` 是一个用于 Vue.js 的库,它能够实现无缝滚动效果,尤其适用于列表数据较多时的场景。而 `el-table` 是 Element UI 组件库中的一个表格组件,它提供了丰富的数据展示和操作功能,包括分页。 当你需要在 `vue-seamless-scroll` 中使用分页数据时,可以按照以下步骤进行: 1. 首先确保已经在项目中安装并引入了 `vue-seamless-scroll` 和 `el-table` 相关组件。 2. 准备你的分页数据,通常这会是一个对象,包含当前页的数据列表 `list`,以及分页相关的属性,如总记录数 `total`、当前页码 `currentPage` 和每页显示数量 `pageSize`。 3. 在模板中使用 `el-table` 来展示数据,并且根据分页数据动态设置其 `data` 属性。 4. 使用 `vue-seamless-scroll` 包裹 `el-table` 组件,确保无缝滚动效果应用在表格上。 5. 通过监听分页器的事件来动态更新 `vue-seamless-scroll` 中的数据。当分页变化时,你需要更新 `el-table` 所使用的数据列表。 6. 确保 `vue-seamless-scroll` 组件能够正确地接收到数据更新,并且无缝滚动效果得以保持。 示例代码可能如下: ```html <template> <div> <seamless-scroll class="scroll-container" :data="tableData"> <el-table :data="tableData.list"> <!-- 表格列定义 --> <el-table-column prop="field1" label="字段1"></el-table-column> <el-table-column prop="field2" label="字段2"></el-table-column> <!-- ... --> </el-table> </seamless-scroll> <!-- 分页组件 --> <el-pagination layout="total, prev, pager, next" :total="tableData.total" :current-page="tableData.currentPage" :page-sizes="[50, 100, 150]" :page-size="tableData.pageSize" @size-change="handleSizeChange" @current-change="handleCurrentChange" /> </div> </template> <script> import SeamlessScroll from 'vue-seamless-scroll'; export default { components: { SeamlessScroll }, data() { return { // 分页数据 tableData: { list: [], total: 0, currentPage: 1, pageSize: 50 } }; }, methods: { fetchData(page = 1) { // 获取数据的逻辑 // 更新 tableData.list 和其他分页属性 }, handleSizeChange(newSize) { // 分页大小变化时触发 this.tableData.pageSize = newSize; this.fetchData(1); }, handleCurrentChange(newPage) { // 当前页变化时触发 this.fetchData(newPage); } }, mounted() { this.fetchData(); } }; </script> <style> .scroll-container { /* seamless-scroll 容器样式 */ } </style> ``` 在上述代码中,我们定义了一个 `vue-seamless-scroll` 组件,并将其作为 `el-table` 的容器。当用户操作分页器时,会触发 `handleSizeChange` 和 `handleCurrentChange` 方法,这些方法会更新 `tableData` 的分页属性,并通过 `fetchData` 方法重新获取数据,以展示新页的内容。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值