ant design vue table rowselections用法
AntDesignVue的Table组件可以方便地实现表格的展示和操作。其中,RowSelections 功能可以让用户在表格中选择多行数据,并对这些数据进行批量操作。
使用 RowSelections 功能需要在 Table 组件上设置 rowSelection 属性,该属性包含以下几个属性:
- type:选框的类型,可选值为 checkbox 和 radio。
- selectedRowKeys:当前已选中的行的 key 值数组。
- onChange:选框发生变化时的回调函数,参数为已选中的行的 key 值数组和所有选框的状态。
示例代码:
```html
<template>
<a-table :columns='columns' :data-source='data' :row-selection='rowSelection'></a-table>
</template>
<script>
export default {
data() {
return {
columns: [
{
title: 'ID',
dataIndex: 'id',
},
{
title: '姓名',
dataIndex: 'name',
},
{
title: '年龄',
dataIndex: 'age',
},
{
title: '地址',
dataIndex: 'address',
},
],
data: [
{
key: '1',
id: '1',
na '张三',antdesignvuetable动态表头
age: 18,
address: '北京市',
},
{
key: '2',
id: '2',
na '李四',
age: 20,
address: '上海市',
},
{
key: '3',
id: '3',
na '王五',
age: 22,
address: '广州市',
},
],
rowSelection: {
type: 'checkbox',
selectedRowKeys: [],
onChange: (selectedRowKeys, selectedRows) => {
console.log(selectedRowKeys, selectedRows);
},
},
};
},
};
</script>
```
上述代码展示了如何在 Table 组件中添加 RowSelections 功能,并设置选框类型为 checkbox。在 onChange 回调函数中,我们可以获取当前已选中的行的 key 值数组和所有选框的状态,并根据需要进行相应的操作。
除了设置 rowSelection 属性外,还可以通过 Table 组件的 selectedRowKeys 属性来设置已选中的行的 key 值数组,从而实现对默认选中行的控制。
RowSelections 功能的详细用法可以参考 Ant Design Vue 官方文档。
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论