iview的tree功能真的很简陋，提供的API又很少。 如在树的文字边上增加图标的API也没有，只能自己自定义了。自定义后 selected的样式就丢失了，包括api中的选中事件也失效了,需要自己加上。参考了下网上的做法，一般都是自己写一个单击事件，并加上样式。
1.Tree标签上增加render属性
在Tree标签上 增加render属性,使用的是renderContent()方法
<Tree :ref="tree" :data="treeData" :render="renderContent"></Tree>
2.编写renderContent()方法
-
基础模型
先在renderContent方法中按照iview中的文档进行cv，这一步已经完成了给树加图标。但是是没有样式，没有选择的效果也没有鼠标放在上面的效果。
renderContent(h, { root, node, data }) {
return h('span', {
style: {
display: 'inline-block',
width: '100%'
}
}, [
h('span', [
h('Icon', {
props: {
type: 'ios-folder-outline'
},
style: {
marginRight: '8px'
}
}),
h('span', {
}, data.title)
]),
]
)
},
-
增加点击样式效果
通过增加class类，先加上ivu-tree-title样式，这样就有了鼠标放在树的节点上的效果。然后在点击事件中为点击项加上ivu-tree-title-selected样式 。
h('span', {
class: ['ivu-tree-title'],
on: {
click: (e) => {
let selected = this.$refs.tree.$el.querySelectorAll('.ivu-tree-title-selected')
for (let i = 0; i < selected.length; i++) {
selected[i].className = "ivu-tree-title";
}
e.path[0].className = "ivu-tree-title ivu-tree-title-selected";//当前点击的元素
}
}
}, data.title)
-
展开和收缩时样式丢失问题
基本效果已经完成，但是如果你一收缩这棵树的话发现选择的效果消失。这是因为展开的时候会重新去绘画这棵树，所以导致点击事件的样式就丢失了。因为tree都有selected字段，所以利用这个字段来判断是否在重绘的时候就加上ivu-tree-title-selected样式。 但是要保证唯一性要清掉上次选中的结果，这边不确定getSelectedNodes 这个方法是否还可以使用，如果可以的话，应该可以通过这个方法获取节点然后重置，目前就通过将tree的data整个selected进行重置。重置的方法的话，并不太喜欢递归，然后网上找了一个通过栈来存放数据来完成遍历的方式。
//重置selected
traverseTree2(node){
if (!node) {
return;
}
var stack = [];
stack.push(node);
var tmpNode;
while (stack.length > 0) {
tmpNode = stack.pop();
tmpNode.selected=false;
if (tmpNode.children && tmpNode.children.length > 0) {
var i = tmpNode.children.length - 1;
for (i = tmpNode.children.length - 1; i >= 0; i--) {
tmpNode.children[i].selected=false;
stack.push(tmpNode.children[i]);
}
}
}
},
renderContent(h, { root, node, data }) {
var checkClass = ["ivu-tree-title"];
if (data.selected) {
checkClass.push("ivu-tree-title-selected");
}
return h('span', {
style: {
display: 'inline-block',
width: '100%'
}
}, [
h('span', [
h('Icon', {
props: {
type: 'ios-folder-outline'
},
style: {
marginRight: '8px'
}
}),
h('span',
{
class: checkClass,
on: {
click: (e) => {
this.traverseTree2(this.treeData[0]) ;//同事小弟将整棵树封装成了数组而不是对象所以就取了数组第一个
let selected = this.$refs.tree.$el.querySelectorAll('.ivu-tree-title-selected')
for (let i = 0; i < selected.length; i++) {
selected[i].className = "ivu-tree-title";
}
e.path[0].className = "ivu-tree-title ivu-tree-title-selected";//当前点击的元素
data.selected = true;
}
}
}, data.title)
]),
]
)
},
最后补充
大部分的tree的操作都可以通过数据模型的修改来反应到页面上，对于vue.js的双向绑定还是很好用的，减轻了很多获取元素的工作。
这边也是参考了别人怎么处理这个问题，然后得出自己的解决方案。
参考:
iView 用renderContent自定义树组件
iview 中tree组件使用render自定义内容树显示问题
