美文网首页Ant Design
Antd Vue:table组件实现单选功能

Antd Vue:table组件实现单选功能

作者: 东方晓 | 来源:发表于2022-09-29 17:28 被阅读0次

    2022-09-20 周四

    文档 ,参考选择和操作的栗子。

    html

    <table>组件设置可选择属性,选择类型设置为单选,以及绑定点击事件

     <a-table
              bordered
              ref="table"
              size="default"
              row-key="id"
              :columns="columns"
              :dataSource="dataSource"
              :pagination="false"
              :row-selection="{ selectedRowKeys: selectedRowKeys,type: 'radio',onChange: onSelectChange }"
            >
    </a-table>
    
    js
    • data
    selectedRowKeys: []
    
    • methods
      onSelectChange (selectedRowKeys) {
          console.log('selectedRowKeys changed: ', selectedRowKeys)
          this.selectedRowKeys = selectedRowKeys
      }
    
    • 效果


    • 主要使用到的api有
    参数 说明 类型 默认值
    rowSelection 列表项是否可选择,配置项 object null
    selectedRowKeys 指定选中项的 key 数组,需要和 onChange 进行配合 string[] []
    type 多选/单选,checkbox or radio string checkbox

    相关文章

      网友评论

        本文标题:Antd Vue:table组件实现单选功能

        本文链接:https://www.haomeiwen.com/subject/dmekartx.html