【ElementUI -- 优化小技巧系列】 -- el-tree 节点内容过长优化以及选中默认节点

在使用elementui过程中经常碰到关于样式的问题，我曾经很喜欢通过类名修改css样式来做，其实原生封装的elementui库的样式对于普通开发来说已经足够了，通过类名修改css只会让组件臃肿难以维护，现在真的越来越怕写css，经常出现各种难以预料的问题，所以这个系列我将分享我开发过程中遇到的样式优化问题

本期主角 El-Tree

优化内容：节点内容过长（顺带提一嘴如何默认选中节点）

在这里插入图片描述
如果节点文字内容过长就会出现这样的情况，节点内容显示不全，而且还很难看，原来我都是通过 .el-tree 的类通过css 进行操作，比如节点过长展示省略号等等，先不说这样改完效果如何，就单从找 el 的类名就很麻烦，打开控制器，选中节点，写css样式这一系列操作，想想就让人难受

这次我直接通过js来调整，用魔法打败魔法

直接上代码

//template
<el-treeclass="mt-2"ref="deptTreeRef":data="instanceGroupTreeOptions":props="{ label: 'label', children: 'children' }":expand-on-click-node="false":filter-node-method="filterNode"highlight-currentdefault-expand-all@node-click="handleNodeClick"><template #default="{node, data}"><div><el-tooltip :show-after="300" :content="data.label" placement="top-start"><span> {{ellipsis(data.label, 50)}} </span></el-tooltip></div></template>
</el-tree>//js
const ellipsis = computed(() => {return function (label: string, length: number) {if (!label) return '';if (label.length > length) {return label.slice(0, length) + '...';}return label;};
});

将节点内容自定义，通过computed的方式，将节点内容控制在你想要的长度， ellipsis 方法就是截取字符串的，第一个参数就是你传递的节点内容，第二个参数就是你希望节点显示内容的长度（顺便提一嘴，computed也是可以传值的，通过闭包的方式，就可以拿到值）然后通过 el-tooltip 包裹节点内容，实现鼠标悬浮展示节点内容，这样页面就可以很美观了
![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/9d76d1332f7c467aa1ccb9e449e5cc2c.png

如何选中默认节点

代码如下

<el-treeclass="mt-2"ref="deptTreeRef"node-key="id" /** 看这里 */:current-node-key="currentNodeId" /** 看这里 */:data="instanceGroupTreeOptions":props="{ label: 'label', children: 'children' }":expand-on-click-node="false":filter-node-method="filterNode"highlight-currentdefault-expand-all@node-click="handleNodeClick"><template #default="{node, data}"><div><el-tooltip :show-after="300" :content="data.label" placement="top-start"><span> {{ellipsis(data.label, 12)}} </span></el-tooltip></div></template></el-tree>

el-tree 有两个属性新增上去就行分别是 node-key 和 current-node-key 然后比如在页面初始化时

const currentNodeId = ref('');
const getInstanceGroupTree = async () => {const res = await treeInstanceGroup(null);instanceGroupTreeOptions.value = res.data;currentNodeId.value = res.data[0].id;deptTreeRef.value?.setCurrentKey(currentNodeId.value);
};