获取iview中表单组件Table的选中数据

最新推荐文章于 2023-09-11 11:35:05 发布

于大圣

最新推荐文章于 2023-09-11 11:35:05 发布

阅读量5.8k

点赞数

分类专栏： iview 文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/yu102655/article/details/112133340

版权

在vue.js的前端开发中，使用iview的Table组件实现审批消息列表时，遇到需求：一键已读或删除需获取选中消息。官方文档未直接提供获取选中项的方法。通过深入研究，发现在Table组件的ref值为'selection'的情况下，可以调用this.$refs.table.getSelection()来获取选中项。这是一个解决此类问题的实用技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

背景：在做某系统的审批中心时，新增了审批消息一键已读和删除功能，用iview的表单组件-Table实现消息列表展示，效果如下图所示：

在实现一键已读或一键删除时需要获取当前消息列表中所有选中项，通过与服务端API交互来改变消息状态或删除消息。iview官方文档仅提供单选、全选或者选中项发生变化时的监听，并没有提供获取选中项的方法。通过查看官方demo和源码，发现可以通过this.$refs.table组件ref值.getSelection()的方式获取table选中项，下面在官方demo的基础上修改下，简单记录，方便自己和后来者：

<template>
    <div>
        <Button @click="handleSelectAll(true)">Set all selected</Button>
        <Button @click="handleSelectAll(false)">Cancel all selected</Button>
        <Button @click="getSelect">Get selected</Button>
        <Table border ref="selection" :columns="columns4" :data="data1"></Table>
    </div&g

最低0.47元/天解锁文章