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

科技   科技   2024-03-31 00:10   江苏  

戳上方“执行上下文”,选择“置顶公众号

关键时刻,第一时间送达!


前提

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

使用方式

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

1、 SelectedRowKeys:用来设置选中的数据 
2、onChange:选中事件 
3、type: 设置选中的类型可为 radio 或者 checkbox
<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 中设置相关的点击事件。即可设置其他的相关逻辑。

methods:{
    data(){
     return {
      checkedKeys: []
     }
    },
 handleRowClick(e) {
        this.checkedKeys = e
    }
}

从前ing



执行上下文
一枚佛系前端开发,会一丢丢摄影,喜欢折腾,爱好美食,分享点学习经验、见闻、笔记、技巧!