企业🤖AI智能体构建引擎,智能编排和调试,一键部署,支持私有化部署方案 广告
### 使用 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> ```