ElementUI中树形控件el-tree修改样式/添加title

目前项目中用的是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>

posted on 2021-09-01 10:16 Planning 阅读(4272) 评论(0) 编辑收藏举报