使用Element时默认勾选表格toggleRowSelection方式

 更新时间:2022年10月21日 10:52:50   作者:xiongdaandxiaomi  
这篇文章主要介绍了使用Element时默认勾选表格toggleRowSelection方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

Element时默认勾选表格toggleRowSelection

页面效果

在页面初始化加载时将表格中某行默认选中

在这里插入图片描述

使用方法:toggleRowSelection

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

table表格渲染

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

      <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
        },
        
    },

element表格默认勾选不生效的问题

默认勾选可以这样做

 this.$refs.multipleTable.toggleRowSelection(row);

如果不生效的话,一般需要考虑这几种情况

1、获取数据(选中的数据以及表格展示的数据)这里的两个数据必须是同一个对象的数据,也就是数据必须是表格当中的数据,而且 不能深拷贝

2、设置表格数据

3、设置完成后,一般我们都是获取到后端的代码再设置this.$refs.multipleTable.toggleRowSelection(row);

这里还要加一个$nextTick

具体代码如下:

    /**
     * @description: 获取表格数据
     * @param {String} code
     * @param {String} srcType
     */
    async getTableData(code, srcType) {
      try {
        this.tipContent = 'loading'
        const { result } = await querySubTabDefine({
          tableSrcType: srcType,
          subjectCode: code
        })
        for (const item of result) {
          item.select = item.flag === '1'
        }
        this.tableData = result
        this.$nextTick(() => {
          for (const row of this.tableData) {
            row.select && this.$refs.table.toggleRowSelection(row, true)
          }
        })
        // console.log(selectArr)
        this.tipContent = this.tableData.length ? false : 'empty'
        this.layoutTable()
      } catch (error) {
        console.error(error)
        this.tipContent = 'error'
        this.tableData = []
      }
    },

其中最主要是这一步

    this.$nextTick(() => {
          for (const row of this.tableData) {
            row.select && this.$refs.table.toggleRowSelection(row, true)
          }
        })

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue关于Element UI中的文本域换行问题

    Vue关于Element UI中的文本域换行问题

    这篇文章主要介绍了Vue关于Element UI中的文本域换行问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • vue使用引用库中的方法附源码

    vue使用引用库中的方法附源码

    当vue使用库中的getvalue方法时,需要调用相关方法,通过定义ref=“”,使用this.$refs.exampleEditor._setValue(''),具体示例代码参考下本文,对vue使用引用库中的方法,感兴趣的朋友一起看看吧
    2021-07-07
  • vue3+ts+elementui-plus二次封装弹框实战教程

    vue3+ts+elementui-plus二次封装弹框实战教程

    这篇文章主要介绍了vue3+ts+elementui-plus二次封装弹框实战教程,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-07-07
  • vue3响应式Object代理对象的读取示例详解

    vue3响应式Object代理对象的读取示例详解

    这篇文章主要为大家介绍了vue3响应式Object代理对象的读取示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-08-08
  • 详解使用mpvue开发github小程序总结

    详解使用mpvue开发github小程序总结

    这篇文章主要介绍了详解使用mpvue开发github小程序总结,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • Vue 服务端渲染SSR示例详解

    Vue 服务端渲染SSR示例详解

    这篇文章主要介绍了Vue 服务端渲染SSR示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • vue生命周期与钩子函数简单示例

    vue生命周期与钩子函数简单示例

    这篇文章主要介绍了vue生命周期与钩子函数,结合简单实例形式分析了vue.js生命周期及钩子函数相关流程与实现技巧,需要的朋友可以参考下
    2019-03-03
  • vue自动路由-单页面项目(非build时构建)

    vue自动路由-单页面项目(非build时构建)

    这篇文章主要介绍了vue自动路由-单页面项目(非build时构建),本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-04-04
  • 利用Vue3封装一个弹框组件简单吗

    利用Vue3封装一个弹框组件简单吗

    最近在项目中自己封装的一个记录一下,下面这篇文章主要给大家介绍了关于利用Vue3封装一个弹框组件的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2021-12-12
  • vue开发页面自适应屏幕尺寸的实例代码

    vue开发页面自适应屏幕尺寸的实例代码

    使用vue开发的页面都是通过px设置它的尺寸,如果换了一个不同尺寸的屏幕就会出现页面排版错乱,显示不完整等情况,下面通过插件将px装换为rem单位适应不同尺寸的屏幕,需要的朋友可以参考下
    2022-12-12

最新评论