使用Element时默认勾选表格toggleRowSelection

最新推荐文章于 2025-06-12 15:40:51 发布

xiongdaandxiaomi

最新推荐文章于 2025-06-12 15:40:51 发布

阅读量5.3w

点赞数 13

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： element el-table toggleRowSelection 默认勾选

本文链接：https://blog.youkuaiyun.com/xiongdaandxiaomi/article/details/83618744

Vue 专栏收录该内容

64 篇文章

订阅专栏

本文介绍如何在Element UI的el-table组件中实现页面加载时默认选中某行的方法。通过toggleRowSelection方法结合watch监听，可以实现在页面初始化或特定条件下自动选中表格中的指定行。

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

页面效果：

在页面初始化加载时将表格中某行默认选中
在这里插入图片描述

使用方法：toggleRowSelection

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

table表格渲染

      <el-table :data="listPowerSupplyTab" border ref="listPowerSupplyTab" width="100%"
                     @selection-change="handleSelectionChange">
                        <el-table-column  type="selection"  width="55">
                            </el-table-column>
                        <el-table-column
                            prop="powerSupplyStationName"
                            label="供电所名称"
                            width="180">
                        </el-table-column>
                        <el-table-column
                            prop="powerSupplyStationAddress"
                            label="供电所地址"
                            width="180">
                        </el-table-column>
                        <el-table-column
                            prop="contacts"
                            label="联系人">
                        </el-table-column>
                        <el-table-column
                            prop="telephone"
                            label="电话">
                        </el-table-column>
                        <el-table-column
                            prop="powerSupplyMode"
                            label="供电方式 ">
                        </el-table-column>
                        <el-table-column
                            prop="capacity"
                            label="配电容量 ">
                        </el-table-column>
                        <el-table-column
                            prop="subordinatePowerSupplyBureau"
                            label="所属供电局 ">
                        </el-table-column>
                        </el-table>

注意：
1、注意el-table上有一个ref="listPowerSupplyTab"的属性
2、toggleRowSelection(row, selected)接受两个参数，row传递被勾选行的数据，selected设置是否选中

使用watch监听listPowerSupplyTab数据

watch:{
        listPowerSupplyTab(n,o){
            this.$nextTick( ()=> {
                this.$refs.listPowerSupplyTab.toggleRowSelection(this.listPowerSupplyTab[0],true);
            })
        },
    },

ref引用到Dom元素上，再执行dom上的toggleRowSelection方法。

当页面有隐藏显示的tab页签时

因为一次性加载数据，因而监听active的变化

watch:{
        //监听active 
         active: {
            handler(n,o){
             this.$nextTick(()=> {
                  if(n == '6'){
                   this.listPowerSupplyTabNew.forEach((ele,indexItem) => {
                        if(ele.type=='1'){
                            this.$refs.listPowerSupplyTabRef.toggleRowSelection(ele);
                        }
                    })
                  }else if(n == '7'){
                   this.technicalInformationNew.forEach((ele,indexItem) => {
                        if(ele.type=='1'){
                            this.$refs.technicalInformationNewRef.toggleRowSelection(ele);
                        }
                    })
                  }
               
            })
        },
            immediate: true,
            deep: true
        },
        
    },