elementUI Tree 樹形控件實現單選+獲取樹形控件單選框勾選內容

 

 

html部分

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

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]);
　　　　}
　　},

...

獲取勾選框的內容  Array[id]   

getCheckedKeys和getHalfCheckedKeys都是官方文檔方法,組合起來 獲取當前 樹狀插件  當前的勾選框checkout 內容 

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

擴展參考(及其 屏蔽父級勾選框的方法)

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