el-tree实现禁用与反显选中状态以及指定层级横向样式

最近项目中用el-tree时我遇到一个问题，禁用功能和反显选中状态的功能不能同时生效，一般来说，实现反显选中状态只需要设置指定的node-key就可以，但是当设置禁用的时候，反显选中就失效了。找了半天原因，想到可能是渲染的时候先被禁用了，导致反显选中无法赋值，所以出现上面的问题。

先看效果吧

知道原因了就好办了，直接上代码吧 

<el-tree
   ref="tree"
   :data="provinceData"
   show-checkbox
   :render-content="renderContent"
   :default-expanded-keys="defaultExpandedKeys"
   highlight-current
   :props="treeProps"
   node-key="areaCode"
   @check="cityCheckChange"
   @node-expand="handleExpand"
/>

data() {
    return {
      defaultExpandedKeys: [0], // 默认展开项，0为项目中顶层的code
      provinceData: [], // 树数据，结构与官方举例的结构类似
      treeProps: {
        label: 'areaName',
        children: 'children',
        isLeaf: (data, node) => {
          return node.areaLevel === 4;
        },
      },
    }
}

// 拿到树数据后赋值默认选中和禁用-注意要先设置默认选中再设置禁用
this.$nextTick(() => {
  // setCheckedKeys是设置默认选中key
  this.$refs.tree.setCheckedKeys(this.freightForm.areaCodes || []);
  // 设置禁用
  this.setDisabled(this.provinceData);
  
});

// 递归函数，给每层树赋值disabled
setDisabled(obj) {
  obj.forEach((item) => {
    this.$set(item, 'disabled', true);
    if (item.children) {
      this.setDisabled(item.children);
    }
  });
  return obj;
},

以上就可以同时实现禁用和反显选中状态了。

下面是给指定层级设置横向样式

renderContent(h, { node }) {
   // 树节点的内容区的渲染 Function
   let classname = '';
   // 由于项目中有三级菜单也有四级级菜单，就要在此做出判断
   if (node.level === 4) {
     classname = 'foo';
   }
   if (node.level === 3 && node.childNodes.length === 0) {
     classname = 'foo';
   }
   return h('p', { class: classname }, node.label);
},

handleExpand() {
   this.$nextTick(() => {
      this.changeCss();
   });
},

changeCss() {
  const levelName = document.getElementsByClassName('foo'); // levelname是上面的最底层节点的名字
  for (let i = 0; i < levelName.length; i++) {
    // cssFloat 兼容 ie6-8  styleFloat 兼容ie9及标准浏览器
    levelName[i].parentNode.style.cssFloat = 'left'; // 最底层的节点，包括多选框和名字都让他左浮动
    levelName[i].parentNode.style.styleFloat = 'left';
    levelName[i].parentNode.onmouseover = function () {
        this.style.backgroundColor = '#fff';
    };
  }
},