在 ant-design-vue 中,提供 rowSelection.selectedRowKeys 来控制选中项,同时配合 onChange 使用(选中项发生变化时的回调)。

<a-table
  :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
  :columns="columns"
  :data-source="data"
/>
  ......
</a-table>

selectedRowKeys 为选中行的的 rowKey 属性的值;selectedRows 为选中数据的集合;change 回调函数代码如下:

onSelectChange (selectedRowKeys, selectedRows) {
  this.selectedRowKeys = selectedRowKeys
  this.selectedRows = selectedRows
},

注意,在 Table 中,dataSource 和 columns 里的数据值都需要指定 key 值。对于 dataSource 默认将每列数据的 key 属性作为唯一的标识。如果你的数据没有这个属性,务必使用 rowKey 来指定数据列的主键。例如:加上rowKey="id"或者rowKey={record => record.id}。若没有指定,控制台会出现缺少 key 的提示,表格组件也会出现各类奇怪的错误。

那我们如何添加默认选择呢?ant 提供了一个 getCheckboxProps API 用来配置选择框的默认属性。

defaultChecked 表示表格里包含已选中项的 id,都给默认选中。

<a-table
  rowKey="id"
  row-selection={{
    onChange: this.handleSelectChange.bind(this),
    getCheckboxProps: record => {
      return {
        props: {
          defaultChecked: this.selectedRowKeys.includes(record.id),
        },
      }
    },
    selectedRowKeys: this.selectedRowKeys }}
  pagination={false}
  data-source={this.tableData}
  columns={columns.call(this, h)}
  {...{ scopedSlots: this.scopedSlotsList }}
/>

 

 

 

Logo

前往低代码交流专区

更多推荐