首页 > 其他分享 >elementUI Tree 树形控件实现单选+获取树形控件单选框勾选内容

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

时间:2022-10-11 18:11:12浏览次数:72  
标签:控件 refs label 树形 单选 id

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: </span>'children'<span style="color: rgba(0, 0, 0, 1)">,
        label: </span>'label'<span style="color: rgba(0, 0, 0, 1)">
      }<br><br>...<br></span></pre>

  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

 

https://www.cnblogs.com/tianmiaogongzuoshi/p/13886111.html?ivk_sa=1024320u

标签:控件,refs,label,树形,单选,id
From: https://www.cnblogs.com/sunny3158/p/16780103.html

相关文章