elementel-tree控件获取当前选节点key值

ref方式(最好)

1.  
   <el-tree
2.  
   ref="tree"
3.  
   style="overflow: auto;width: 100%;"
4.  
   :data="data"
5.  
   node-key="id"
6.  
   show-checkbox>
7.  
   </el-tree>
8.  
    
9.  
   this.$refs.tree.getCheckedNodes();
10.  
    this.$refs.tree.getCheckedKeys()

el-tree定义

1.  
   <el-tree
2.  
   :data="data"
3.  
   node-key="levelId"
4.  
   :props="defaultProps"
5.  
   @check-change="handleCheckChange"
6.  
   @check="handleCheck"
7.  
   show-checkbox>
8.  
   </el-tree>

check和check-change都可以用,那个方便用那个

触发

1. check: 当复选框被点击的时候触发
2. check-change: 节点选中状态发生变化时的回调

参数

node-key: 每个树节点用来作为唯一标识的属性，整棵树应该是唯一的

默认为id,和node-key对应即可

选中时触发

1.  
   handleCheck(data, checkedData) {
2.  
   // 共两个参数，依次为：
3.  
   // 传递给 data 属性的数组中该节点所对应的对象、
4.  
   // 树目前的选中状态对象，
5.  
   // 包含 checkedNodes、checkedKeys、halfCheckedNodes、halfCheckedKeys 四个属性
6.  
   console.log(checkedData)
7.  
   // 这是选中的节点的key数组
8.  
   console.log(checkedData.checkedKeys)
9.  
   // 这是选中的节点数组
10.  
    console.log(checkedData.checkedNodes)
11.  
    debugger
12.  
    },
13.  
    handleCheckChange(data, checked, indeterminate) {
14.  
    // 共三个参数，依次为：
15.  
    // 传递给 data 属性的数组中该节点所对应的对象、
16.  
    // 节点本身是否被选中、
17.  
    // 节点的子树中是否有被选中的节点
18.  
    console.log(data, checked, indeterminate)
19.  
    // debugger
20.  
    }

这篇好文章是转载于：学新通技术网