### 使用 v-model 绑定了 selection 参数就会开启多选列,选中数据会自动同步:
```
<template>
<ele-pro-table
:datasource="datasource"
:columns="columns"
v-model:selection="selection"
:row-selection="{ columnWidth: 48 }">
</ele-pro-table>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import type { User } from '@/api/system/user/model';
// 表格选中数据,需要默认选中给 selection 赋值即可
const selection = ref<User[]>([]);
/* 清空选择 */
const clearSelection = () => {
selection.value = [];
};
</script>
```
### `row-selection`参数可不写,里面的`selectedRowKeys`、`onChange`、`type`三个字段不需要写,如果需要监听选择改变:
```
<template>
<!-- 把 v-model 拆开写,或者简单一点,用 watch 监听 selection 也行 -->
<ele-pro-table
:selection="selection"
@update:selection="onSelectionChange">
</ele-pro-table>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import type { User } from '@/api/system/user/model';
const selection = ref<User[]>([]);
const onSelectionChange = (selection) => {
selection.value = selection;
};
</script>
```
### 开启单选列与多选列类似,使用 v-model 绑定了`current`参数即可,也支持设置`row-selection`参数:
```
<template>
<ele-pro-table v-model:current="current" selection-type="radio"></ele-pro-table>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import type { User } from '@/api/system/user/model';
// 表格单选选中数据
const current = ref<User>();
/* 清空选择 */
const clearSelection = () => {
current.value = undefined;
}
</script>
```
### 也可以同时绑定`current`和`selection`,并通过`selectionType`动态控制是单选列还是多选列:
```
<template>
<ele-pro-table
v-model:current="current"
v-model:selection="selection"
:selection-type="selectionType">
</ele-pro-table>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import type { User } from '@/api/system/user/model';
// 表格单选选中数据
const current = ref<User>();
// 表格多选选中数据
const selection = ref<User[]>([]);
//
const selectionType = ref('radio');
/* 动态改变为多选列 */
const changeSelectionType = () => {
selectionType.value = 'checkbox';
}
</script>
```
### 多选列实现禁用某些数据的复选框,通过`row-selection`实现:
```
<template>
<ele-pro-table v-model:selection="selection" :row-selection="rowSelection"></ele-pro-table>
</template>
<script lang="ts" setup>
import { ref, reactive } from 'vue';
import type { User } from '@/api/system/user/model';
const selection = ref<User[]>([]);
const rowSelection = reactive({
columnWidth: 48,
getCheckboxProps: (record) => {
return {
disabled: record.id < 3 // 这里是让 id<3 的禁用,根据自己业务修改
};
}
});
</script>
```