现在的element的树形只有多选,没有单选,现在项目需要实现树形单选

先直接上代码

     <el-tree
            style="height: 50vh;overflow: auto"
            :data="treeverData"
            :check-on-click-node="false"
            ref="treeVerNew"
            show-checkbox
            :check-strictly="true"
            default-expand-all
            node-key="treeId"
            :props="defaultnewProps"
            @check-change="treeCheckClick"
            :default-checked-keys="treeIdList"
            empty-text="暂无数据"
        ></el-tree>
      treeverData:[],
      defaultnewProps: {
        children: 'children',
        label: 'label',
        id:'id',
        disabled: (data) => {
          return data.type === 1;
        }, 
      treeCheckClick(data){
      proxy.$refs.treeVerNew.setCheckedKeys([]);
      proxy.$refs.treeVerNew.setChecked(data, true);
      },

 就是在选中复选框之前清空所有选中数据,然后让点击数据出现选中效果

其实在中间还有一个问题,我的树形数组中会有相同的id,所以还需要将树形数据层层遍历一下,都加上一个新的treeId,然后再按照上述写的就可以了

   proxy.$Api.Get("url", params).then((res) => {
          if(res.code===1){
            verTreeNew.treeverData=res.data
            for (var i = 0; i < verTreeNew.treeverData.length; i++) {
              verTreeNew.treeverData[i].children.map((item)=>{
                item.treeId =item.id+item.parentId;
                item.children.map((aaa)=>{
                  aaa.treeId =aaa.id+aaa.parentId;
                  aaa.children.map((bbb)=>{
                    bbb.treeId =bbb.id+bbb.parentId;
                    return bbb
                  })
                  return aaa
                })
                return item
              })
            }
          }
        });

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐