ant design of vue 表格默认多选设置

最新推荐文章于 2024-04-02 08:27:30 发布

原创最新推荐文章于 2024-04-02 08:27:30 发布 · 838 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#java #ant

ant design of vue 专栏收录该内容

7 篇文章

订阅专栏

本文介绍如何在AntDesign of Vue中实现表格的默认多选功能。通过配置`:row-selection`属性，并利用`selectedRowKeys`来指定默认选中的项ID，可以轻松实现这一功能。文中提供了一个具体的示例，展示了如何在组件的数据模型中定义默认选中的资源ID。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ant design of vue 表格默认多选设置

效果：
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210617114949184.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0OTg1Mg==,size_16,color_FFFFFF,t_70

table

关键：:row-selection="rowSelectionPower"
数据

 data() {
            return {
                resources: [],
                selResources: [],//默认选中id
                }
                }

 computed: {
            rowSelectionPower() {
                return {
                    onChange: (selectedRowKeys, selectedRows) => {
                        console.log(`选中id: ${selectedRowKeys}`, '选中数据: ', selectedRows);
                        this.selResources = selectedRowKeys//selResources为默认数据的id
                    },
                    selectedRowKeys: this.selResources,//回调-----（关键）
                };
            },
        },

4.🆗！