ant-design-vue table 多选支持默认全选功能
<a-tablesize="small" borderedrowKey="id"row-selection={{ onChange: this.handleSelectChange.bind(this),getCheckboxProps: record => {return {props: {defaultChecked: this.selectedRowKeys.includes(r
·
在 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 }}
/>
更多推荐
已为社区贡献60条内容
所有评论(0)