elementUI Tree 树形控件实现单选+获取树形控件单选框勾选内容

image.png

html部分

<el-tree
                    :data="data"
                    show-checkbox
                    node-key="id"
                    ref="tree"
                    check-strictly
                    highlight-current
                    @check-change="handleClick" 
                    :props="defaultProps"

  >

image.gif

js部分

data:[{
          id: 0,
          label: '一级菜单',
          children: [
          {
            id: 1,
            label: '二级1-1',
          },

          ]
          }],
          defaultProps: {
            children: 'children',
            label: 'label'
          }

...

 handleClick(data,checked, node){
      if(checked){
        //关键
        this.$refs.tree.setCheckedNodes([data]);
      }
    },

....

image.gif

获取勾选框的内容 Array[id]

getCheckedKeys和getHalfCheckedKeys都是官方文档方法,组合起来获取当前树状插件当前的勾选框checkout 内容

 let resArr=this.$refs.tree.getCheckedKeys().concat(this.$refs.tree.getHalfCheckedKeys());

image.gif

扩展参考(及其屏蔽父级勾选框的方法)

https://blog.csdn.net/lianzhang861/article/details/91988151