zoukankan      html  css  js  c++  java
  • Element-ui el-table 树形表格多选

    大家平时使用el-table时,想必一定使用过表格里面的多选吧,那么selection-change事件一定很熟悉吧,触发该事件时我们可以获取到所有被选中的数据。

    产品需求:

    如图所示,点击不同父级下的子级时,想要获取到所有被选中的数据

    问题:

    在具体场景中使用selection-change事件只能监听到同一父级下的变动,根本无法同时获取到其他父级下的被选中项。

    解决办法:

    第一步:给el-table绑定ref="table",

    第二步:勾选完毕后,点击如图所示右上角的按钮时 ,console.log(this.$refs.table)              //注意:名字要与第一步绑定的名字一致

    如图下图所示,为打印出来的数据,由于页面显示屏大小有限,没能给大家截除完成的图片,顺着图中一直往下滑,会看到一个selection属性,selection中的数据为当前父级中被选中项的数据,要想获取到所有父级下的选中项需要进行for循环,这样就可以拿到所需要的数据了。

    大家有不清楚的地方,可以随时联系我进行一 一解答。

  • 相关阅读:
    (8)FastDFS
    (7)文件上传
    (6)品牌新增
    数据仓库_MySQL(2)
    数据仓库_Linux(5)&MySQL(1)
    J哥说生产事故之僵尸进程
    J哥说生产事故之CPU爆表
    idea classpath
    (五)返回两个数组之间的差异
    (四)数组扁平化
  • 原文地址:https://www.cnblogs.com/dreamstartplace/p/12983371.html
Copyright © 2011-2022 走看看