卖坚果的怪叔叔 卖坚果的怪叔叔
  • 首页
  • 生活
  • 技术
  • 记录
  • 工具箱
  • 关于我
首页 › 技术 › Ant-design-vue Table 增加单选操作!

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

坚果大叔
2024-03-30 1:31:36技术阅读 6,390

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

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

1、selectedRowKeys:用来设置选中的数据
2、onChange:选中事件
3、type: 设置选中的类型可为 radio 或者 checkbox



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

methods:{
    data(){
        return {
            checkedKeys: []
        }
    },
    handleRowClick(e) {
        this.checkedKeys = e
    }
}
赞赏 赞(3)
3.29 天气晴 · 周五。
上一篇
Mac 修改应用图标小Tips~
下一篇
在小程序中查看

这是个😊,挣点服务器费用😜

热门文章
deep 不生效!
瞎溜达
火狐 window.event无效问题
JavaScript之继承(未完待续)
一点
给感染新冠的老人提些建议
专题标签
agent (1) CSS (15) dom (1) Es6入门系列 (14) Git (3) html (1) iview (1) JavaScript (9) js (4) Lif (1) Node (4) pyecharts (1) Python (10) ref (1) scriptable (1) Skill (1) vsCode (1) vue (4) wordpress (2) 三月 (1) 上海 (1) 假期 (1) 其他分享 (3) 前端两三问 (15) 古镇 (1) 外滩 (1) 对象 (1) 小程序 (5) 年度总结 (6) 年终总结 (1) 微信机器人 (4) 打字机 (1) 技术 (1) 日常问题 (8) 日常问题记录 (1) 春天 (2) 服务器 (2) 海族馆 (1) 生活 (8) 网上国网 (1) 记录 (3) 通勤 (1) 重学JavaScript (11) 面试题 (10) 🌸 (1)
什么是Agent?
2026-08-15 23:49:12
431 0 2
什么是 Skill?
2026-08-12 21:32:42
348 1 0
失业在家,我给小朋友做了一个练字小程序!
2026-08-07 16:21:52
690 10 1
上线8年,15万用户的小程序,一共赚了多少钱?
2026-05-30 18:01:24
4,683 4 0
3
  • 3
博主

一位佛系的前端开发者,略通摄影,乐于尝试新事物,热衷于美食。

友链
故事胶片
公众号
坚果大叔 执行上下文 卖坚果的怪叔叔 Dacking
Copyright © 2017-2026 卖坚果的怪叔叔

开往-友链接力

萌ICP备20230818号

苏ICP备18048410号-3
  • 首页
  • 生活
  • 技术
  • 记录
  • 工具箱
  • 关于我
# CSS # # JavaScript # # vue # # 微信 # # 生活 #
坚果大叔
345
文章
171
评论
432
喜欢