element el-tree、el-cascader树形控件-树节点的选择(选中当前节点,获取当前id并且获取其父级id) 或者不包含父级id

﹏ヽ暗。殇╰゛Y 2022-10-05 09:55 506阅读 0赞

data(){
        children: [
                        {
                          id: 1,
                          label: "xx生物机",
                          icon: "el-icon-video-camera-solid",
                        },
                        {
                          id: 2,
                          label: "xxx母鸡",
                          icon: "el-icon-video-camera-solid",
                        },
                      ],
    }
    
    <el-tree
              :data="data"
              @check-change="getCheckedNodes"
              show-checkbox
              node-key="id" //keyname
              default-expand-all
              ref="tree"
            >
    </el-tree>

获取方法如下：

this.$refs.tree.getCheckedKeys().concat(this.$refs.tree.getHalfCheckedKeys())

[https://www.cnblogs.com/DIVEY/p/13689975.html][https_www.cnblogs.com_DIVEY_p_13689975.html]

[https://www.cnblogs.com/waterliang/p/12066731.html][https_www.cnblogs.com_waterliang_p_12066731.html]

在保存的时候用以下代码即可(注意在用$refs需要给控件一个ref值，如我的是ref="ww")：

// 勾选的key 包含父级
    var checkedKeys = this.$refs.ww.getCheckedKeys()
    // 暂选状态的母tab的key
    var halfKeys = this.$refs.ww.getHalfCheckedKeys())
    // 合并两个数组
    let save = checkedKeys.concat(halfKeys)
    
    //不包含父级
    var checkedKeys = this.$refs.ww.getCheckedKeys(true)

![6dd8e5101214eb77a33aa8b026b60f6b.png][]

### el-tree 如何仅仅获取当前选中节点的id（不包含其父级id） ###

this.$refs.tree.getCheckedKeys(); 这个貌似是包含父级id的方法

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NzIxMTY4MDQ_size_16_color_FFFFFF_t_70][]

let ridsa = this.$refs.tree.getCheckedKeys(true); //只获取当前选中节点的id

**el-cascader**

[https://www.cnblogs.com/dreamstartplace/p/12894043.html][https_www.cnblogs.com_dreamstartplace_p_12894043.html]

let ridsa = this.$refs['tree'].getCheckedNodes(true);
    
    <el-cascader 
        ref="myCascader" 
        :props="{ checkStrictly: true }"
        @change="handleAreaChange">
    </el-cascader>
    
    handleAreaChange(val){
        //handleAreaChange携带的val参数，获取的数据是label的value，我们需要的是label
          this.$refs['myCascader'].getCheckedNodes()[0].pathLabels;
    }

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NzIxMTY4MDQ_size_16_color_FFFFFF_t_70 1][]

[https_www.cnblogs.com_DIVEY_p_13689975.html]: https://www.cnblogs.com/DIVEY/p/13689975.html
[https_www.cnblogs.com_waterliang_p_12066731.html]: https://www.cnblogs.com/waterliang/p/12066731.html
[6dd8e5101214eb77a33aa8b026b60f6b.png]: /images/20221005/aecd8963f1f04687960905052b301836.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NzIxMTY4MDQ_size_16_color_FFFFFF_t_70]: /images/20221005/617ded4e79904bcd859bb255b965b783.png
[https_www.cnblogs.com_dreamstartplace_p_12894043.html]: https://www.cnblogs.com/dreamstartplace/p/12894043.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NzIxMTY4MDQ_size_16_color_FFFFFF_t_70 1]: /images/20221005/8520c7d5ee534206b2188d73cae7c614.png