【项目经验】：elementui多选表格默认选中

最新推荐文章于 2024-12-07 11:41:10 发布

bug天选之子

最新推荐文章于 2024-12-07 11:41:10 发布

阅读量4.3k

点赞数 1

分类专栏：项目经验文章标签： elementui 前端 javascript

本文链接：https://blog.csdn.net/weixin_70245286/article/details/132953385

版权

项目经验专栏收录该内容

19 篇文章 0 订阅

订阅专栏

本文介绍了如何在ElementUI的表格组件中，使用`toggleRowSelection`方法实现在页面加载时默认选中指定项的需求。通过Vue的mounted钩子和$nextTick，结合数据绑定，实现表格数据的自动选中。

摘要由CSDN通过智能技术生成

一.需求

在页面刚打开就默认选中指定项。

二.方法Table Methods

toggleRowSelection

用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）

row, selected

详细请看elementui官网https://element.eleme.io/#/zh-CN/component/table

三.代码

mounted () {
        // multipleSelection 想选中的数据 tableData表格数据
        this.$nextTick(() => {
            this.multipleSelection.forEach(row => {
                this.$refs.multipleTable.toggleRowSelection(this.tableData.find(item => {
                    return row.date == item.date;
                }), true)
            })
        })
    },