• VUE ELELEMENT table默认选中


    VUE EL-ELEMENT table默认选中
    1.toggleAllSelection(方式一:全选中)
    2.toggleRowSelection(方式二:控制选中)
    1.toggleAllSelection(方式一:全选中)
    toggleAllSelection 用于多选表格,切换所有行的选中状态

    // 给el-table 添加上ref=""
    <el-table
    :data="dataList"
    border
    :row-style="{height:10+'px'}"
    :cell-style="{padding:5+'px'}"
    ref="mainTable"
    v-loading="dataListLoading"
    @selection-change="selectionChangeHandle"
    style=" 100%;">
    </el-table>
     
    需要在el-table上面添加上ref=“mainTable” (mainTable -随便起)

    // 获取完数据调用
    this.$nextTick(function(){
    this.$refs.mainTable.toggleAllSelection()
    })
     
    获取完数据在后面加上这段代码即可。
    this.$ refs.mainTable获取名字为mainTable的组件。
    this.$nextTick的作用是在DOM更新之后再执行的,防止table列表为渲染上就改变选中方式而导致无效。

    2.toggleRowSelection(方式二:控制选中)
    toggleRowSelection 用于多选表格,切换某一行的选中状态,如果使用了第二个参数,则是设置这一行选中与否(selected 为 true 则选中)

    // 给el-table 添加上ref=""
    <el-table
    :data="dataList"
    border
    :row-style="{height:10+'px'}"
    :cell-style="{padding:5+'px'}"
    ref="mainTable"
    v-loading="dataListLoading"
    @selection-change="selectionChangeHandle"
    style=" 100%;">
    </el-table>
     
    这里与上面一样。

    // 获取的数据为 rows,获取完数据调用
    this.$nextTick(function(){
    if(rows){//判断有无数据
    rows.forEach(row=>{
    this.$refs.mainTable.toggleRowSelection(row)//这样为全选
    //if(row.xx == xx){//判断是否默认选中某一行
    //this.$refs.mainTable.toggleRowSelection(row)
    //}
    })
    }
    this.$refs.mainTable.toggleAllSelection()
    })
     
    进行过滤,默认选中符合条件的。


    ————————————————
    版权声明:本文为CSDN博主「小小aBin」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
    原文链接:https://blog.csdn.net/qq_40679278/article/details/108095968

  • 相关阅读:
    java-数组
    编程练习
    java-循环语句
    java-条件语句if&switch
    JAVA-运算符
    JAVA-常量
    springAOP源码分析之篇一:配置文件的解析
    spring IOC容器的扩展
    spring IOC之篇六 bean的加载---bean的创建
    spring IOC之篇五 bean的加载--缓存中获取
  • 原文地址:https://www.cnblogs.com/javalinux/p/16381720.html
Copyright © 2020-2023  润新知