前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Ant-design-vue Table 增加单选操作!

Ant-design-vue Table 增加单选操作!

作者头像
执行上下文
发布2024-04-01 10:22:37
5180
发布2024-04-01 10:22:37
举报
文章被收录于专栏:执行上下文执行上下文

前提

业务上有需求,需要在表格中增加单选操作来显示该条数据的附加信息。因为 UI 组件库使用的 ant-design-vue,在看过 api后发现 table组件已经内置了相关功能。直接使用即可。

使用方式

新建一个table组件。主要设置两个参数一个是 rowKey,另外一个是 rowSelection。rowKey用来做当前行的唯一标识。而rowSelection有三个参数

1、 SelectedRowKeys:用来设置选中的数据

2、onChange:选中事件

3、type: 设置选中的类型可为 radio 或者 checkbox

代码语言:javascript
复制
<a-table
  ref="table"
  size="middle"
  :scroll="{x: 1500}"
  bordered
  rowKey="id"
  :columns="columns"
  :dataSource="dataSource"
  :pagination="ipagination"
  :loading="loading"
  :rowSelection="{selectedRowKeys: checkedKeys, onChange: handleRowClick, type: 'radio'}"
  :customRow="customRowFn"
  @change="handleTableChange">
</a-table>

在 methods 中设置相关的点击事件。即可设置其他的相关逻辑。

代码语言:javascript
复制
methods:{
    data(){
     return {
      checkedKeys: []
     }
    },
 handleRowClick(e) {
        this.checkedKeys = e
    }
}
本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2024-03-31,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 执行上下文 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 前提
  • 使用方式
    • 新建一个table组件。主要设置两个参数一个是 rowKey,另外一个是 rowSelection。rowKey用来做当前行的唯一标识。而rowSelection有三个参数
    领券
    问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档