el-tree全部禁用并横向显示

element官方自带的是在节点设置disabled：true属性，在项目中并不好用，如data: [{ id: 1, label: '一级 2', children: [{ id: 3, label: '二级 2-1', children: [{ id: 4, label: '三级 3-1-1' }, { id: 5, label: '三级 3-1-2', disabled: true }] },.....

props绑定的对象中可以实现灵活禁用
 

<el-tree
                ref="tree"
                :props="propsObj"
                :check-strictly="checkStrictly"
                :data="qxdata"
                show-checkbox
                node-key="id"
                :default-expand-all="true"
                :default-checked-keys="checkedkey"
                :render-content="renderContent"
              >
              </el-tree>

data中和数据

            qxdata: [], //权限树列表
            checkedkey: [], //选中key
            checkStrictly:false,
            propsObj: {
                children: 'children',
                label: 'label',
                disabled: this.disabledFn,
            }

methods

disabledFn() {
      return true
    },

// el-tree
        renderContent(h, { node, data, store }) {
            let classname = '';
            // 由于项目中有三级菜单也有四级级菜单，就要在此做出判断
            if (node.level === 3 && node.childNodes.length === 0) {
                classname = 'foo';
            }
            if (node.level === 2) {
                classname = 'footwo';
            }
            if (node.level === 3 && node.childNodes.length != 0) {
                classname = 'foothree';
            }

            if (node.level === 4) {
                classname = 'foofour';
            }
            return h(
                'p',
                {
                    class: classname
                },
                node.label
            );
        },
        //横向显示
        changeTreeClass() {
            // 找到之前做标记的class
            var classDomList = document.getElementsByClassName('foo');
            // 改变这几个样式
            for (var i = 0; i < classDomList.length; i++) {
                classDomList[i].parentNode.style.cssText = 'float: left';
                classDomList[i].parentNode.parentNode.parentNode.style.marginLeft = '70px';
            }
            var classDomListtwo = document.getElementsByClassName('footwo');
            for (var i = 0; i < classDomListtwo.length; i++) {
                classDomListtwo[i].parentNode.parentNode.parentNode.style.marginLeft = '20px';
            }
            var classDomListthree = document.getElementsByClassName('foothree');
            for (var i = 0; i < classDomListthree.length; i++) {
                classDomListthree[i].parentNode.style.cssText = 'float: left';
                classDomListthree[i].parentNode.parentNode.parentNode.style.marginLeft = '70px';
            }
            //four
            var classDomListfour = document.getElementsByClassName('foofour');
            for (var i = 0; i < classDomListfour.length; i++) {
                //
                classDomListfour[i].parentNode.parentNode.parentNode.style.cssText = 'clear: both';
                classDomListfour[i].parentNode.style.cssText = 'float: left';
                classDomListfour[i].parentNode.parentNode.style.marginLeft = '70px';
            }
        },

 //角色对应的菜单树
            axios
                .ajax({
                    method: 'get',
                    url: xxxx
                })
                .then((res) => {
                    if (res.code == 200) {
                        that.qxdata = res.menus[1].children;
                        that.checkStrictly = true;
                        this.$nextTick(() => {
                            that.changeTreeClass()
                            let routes = res.checkedKeys;
                            //回显
                            this.$refs.tree.setCheckedKeys(routes);
                        })
                    }
                });