ElementUI中樹形控件el-tree修改樣式/添加title

目前項目中用的是VUE+Element，中間有個樹結構展示的分級分組數據，初步實現了數據加載/點擊事件的完成。    

    <el-tree
      :props="props"
      :data="treeData"
      ref="tree"
      :load="loadNode"
      :filter-node-method="filterNode"
      node-key="id"
      :default-expanded-keys="['100']"
      @current-change="handleNodeClick"
      lazy
    ></el-tree>

 js代碼如下

loadNode(node, resolve) {
      if (node.level === 0) {
        //getData:獲取數據接口
        getData().then(function(res) {
          if (res && res.data) { 
            let treeData = res.data;
            return resolve(treeData);
          }
        });
      } else {
        if (node.data && node.data.children && node.data.children.length > 0) {
          return resolve(node.data.children);
        } else if (
          node.data &&
          node.data.children &&
          node.data.children.length === 0
        ) {
          //getDataList：獲取最后一級數據的接口
          getDataList({ id: node.data.id }).then(function(res) {
            res.data.forEach(data => {
              data.leaf = true;
            });
            return resolve(res.data);
          });
        }
      }
    }

但是，項目經理說，1.鼠標移入要顯示全部內容 2.如果有編碼的數據要高亮顯示。

如果是標簽，我知道肯定說很簡單1加title，2判斷加不同類名

可是它是樹啊，數據都在treeData里面，官網沒有案例，我不會了。。。

然后上網查資料，我又會了！

解決方案如下：

<el-tree
      :props="props"
      :data="treeData"
      ref="tree"
      :load="loadNode"
      :filter-node-method="filterNode"
      node-key="id"
      :default-expanded-keys="['100']"
      @current-change="handleNodeClick"
      lazy
    >
      <span class="span-ellipsis" slot-scope="{ node, data }">
        <span :title="node.label" :class="node.data.code ? 'node1' : 'node2'">{{
          node.label
        }}</span>
      </span>
    </el-tree>