目前项目中用的是VUE+Element，中间有个树结构展示的分级分组数据，初步实现了数据加载/点击事件的完成。
1 <el-tree 2 :props="props" 3 :data="treeData" 4 ref="tree" 5 :load="loadNode" 6 :filter-node-method="filterNode" 7 node-key="id" 8 :default-expanded-keys="[‘100‘]" 9 @current-change="handleNodeClick" 10 lazy 11 ></el-tree>
js代码如下
1 loadNode(node, resolve) { 2 if (node.level === 0) { 3 //getData:获取数据接口 4 getData().then(function(res) { 5 if (res && res.data) { 6 let treeData = res.data; 7 return resolve(treeData); 8 } 9 }); 10 } else { 11 if (node.data && node.data.children && node.data.children.length > 0) { 12 return resolve(node.data.children); 13 } else if ( 14 node.data && 15 node.data.children && 16 node.data.children.length === 0 17 ) { 18 //getDataList：获取最后一级数据的接口 19 getDataList({ id: node.data.id }).then(function(res) { 20 res.data.forEach(data => { 21 data.leaf = true; 22 }); 23 return resolve(res.data); 24 }); 25 } 26 } 27 }
但是，项目经理说，1.鼠标移入要显示全部内容 2.如果有编码的数据要高亮显示。
如果是标签，我知道肯定说很简单1加title，2判断加不同类名
可是它是树啊，数据都在treeData里面，官网没有案例，我不会了。。。
然后上网查资料，我又会了！
解决方案如下：
1 <el-tree 2 :props="props" 3 :data="treeData" 4 ref="tree" 5 :load="loadNode" 6 :filter-node-method="filterNode" 7 node-key="id" 8 :default-expanded-keys="[‘100‘]" 9 @current-change="handleNodeClick" 10 lazy 11 > 12 <span class="span-ellipsis" slot-scope="{ node, data }"> 13 <span :title="node.label" :class="node.data.code ? ‘node1‘ : ‘node2‘">{{ 14 node.label 15 }}</span> 16 </span> 17 </el-tree>