最近的写的一个项目,需要用的a-tree。甲方就觉得那个小三角不好点,需要点文字也可以展开。就需要小小的改动一哈。
效果图
过程:
实现起来还是很简单的
1.我们可以看ant的官方文档,发现有一个事件expand是当我们展开/收起时就会触发
expandeKeys绑定到a-tree的值,它选中的值会默认展开
2.根据上一步就知道我们要展开这个树形要绑定的事件跟值 ,绑定到我们的组件中html部分
<a-tree
block-node
@select="clicktree"
class="trees"
style="
min-width: 3.78rem;
width: 3.78rem;
color: #becef2;
background: transparent;
overflow: auto;
height: calc(100vh - 1.51rem);
display: block;
"
@expand="expand"
v-if="tree.treeData.length > 0"
:load-data="onLoadData"
:tree-data="tree.treeData"
v-model:expandedKeys="expandedKeys"
v-model:selectedKeys="selectedKeys"
/>
3.这是js部分,主要实现的步骤
首先是选中文字的函数,我们可以得到一个key跟name,key就相当于是一个主键,name就是我们所点击行的信息
首先进行一个判断,我们展开值expandedkeys里面有没有 值,如果没有值,直接点击文字是不生效的,如果没有值,这一步直接把key赋给它就好了
有值的话我们就去调用展开的函数
const clicktree = (key, name) => {
if (expandedKeys.value.length == 0) {
expandedKeys.value = key;
}
expand(key, 1);
};
我们把文档中的两个值都打印出来,发现我们点击小三角得到值是我们所点击行对应的key值,主要是就把我们文字所得到的key绑定到expandedKeys上,就可以实现点击文字实现展开
const expand = (a, { node }) => {
console.log(6666, a, expandedKeys.value);
a = a + '';
expandedKeys.value.push(a);
console.log(expandedKeys.value);
};