iView的树的render函数渲染
官网：渲染函数& JSX
{ // 与 `v-bind:class` 的 API 相同， // 接受一个字符串、对象或字符串和对象组成的数组 'class': { foo: true, bar: false }, // 与 `v-bind:style` 的 API 相同， // 接受一个字符串、对象，或对象组成的数组 style: { color: 'red', fontSize: '14px' }, // 普通的 HTML attribute attrs: { id: 'foo' }, // 组件 prop props: { myProp: 'bar' }, // DOM property domProps: { innerHTML: 'baz' }, // 事件监听器在 `on` 内， // 但不再支持如 `v-on:keyup.enter` 这样的修饰器。 // 需要在处理函数中手动检查 keyCode。 on: { click: this.clickHandler }, // 仅用于组件，用于监听原生事件，而不是组件内部使用 // `vm.$emit` 触发的事件。 nativeOn: { click: this.nativeClickHandler }, // 自定义指令。注意，你无法对 `binding` 中的 `oldValue` // 赋值，因为 Vue 已经自动为你进行了同步。 directives: [ { name: 'my-custom-directive', value: '2', expression: '1 + 1', arg: 'foo', modifiers: { bar: true } } ], // 作用域插槽的格式为 // { name: props => VNode | Array<VNode> } scopedSlots: { default: props => createElement('span', props.text) }, // 如果组件是其它组件的子组件，需为插槽指定名称 slot: 'name-of-slot', // 其它特殊顶层 property key: 'myKey', ref: 'myRef', // 如果你在渲染函数中给多个元素都应用了相同的 ref 名， // 那么 `$refs.myRef` 会变成一个数组。 refInFor: true }
使用强大的 Render 函数可以自定义节点显示内容和交互，比如添加图标，按钮等。
Render 函数的第二个参数，包含三个字段：
- root ：树的根节点
- node ：当前节点
- data ：当前节点的数据
通过合理地使用 root、node 和 data 可以实现各种效果，其中，iView 给每个节点都设置了一个
nodeKey字段，用来标识节点的 id。
两种写法：
Render 函数分两种，一种是给当前树的每个节点都设置同样的渲染内容，此 render 通过 Tree 组件的属性 render 传递；另一种是单独给某个节点设置，在该节点的 render 字段内设置；同时设置时，会优先使用当前节点的 Render 函数。
写法一：
代码：
最简单的写法
在树中绑定render函数
<template>
<Tree
ref="tree"
:data="data"
:render="renderContent"
class="demo-tree-render"
></Tree>
</template>
<script>
export default {
data() {
return {
data: [
{
title: "parent 1",
expand: true,
children: [
{
title: "parent 1-1",
expand: true,
children: [
{
title: "leaf 1-1-1",
primaryKey: 11,
checkbox: true,
checked: true,
},
{
title: "leaf 1-1-2",
primaryKey: 12,
checkbox: true,
checked: false,
},
{
title: "leaf 1-1-3",
primaryKey: 13,
checkbox: true,
checked: true,
},
],
},
{
title: "parent 1-2",
expand: true,
children: [
{
title: "leaf 1-2-1",
primaryKey: 21,
checkbox: true,
checked: false,
},
{
title: "leaf 1-2-2",
primaryKey: 22,
checkbox: true,
checked: false,
},
],
},
],
},
],
};
},
methods: {
renderContent(h, { root, node, data }) {
return h('span', data.title)
},
},
};
</script>
<style>
</style>
写法二：
代码：
render属性
<template>
<Tree
ref="tree"
:data="data1"
>
</Tree>
</template>
<script>
export default {
data() {
return {
data1: [],
data: [
{
title: "parent 1",
expand: true,
img: "./../static/img/1.jpg",
text: "number one",
children: [
{
title: "child 1-1",
expand: true,
img: "./../static/img/1.jpg",
text: "number two",
children: [
{
title: "leaf 1-1-1",
expand: true,
img: "./../static/img/1.jpg",
text: "number three",
checkbox: true,
},
{
title: "leaf 1-1-2",
expand: true,
img: "./../static/img/1.jpg",
text: "number four",
checkbox: true,
},
],
},
{
title: "child 1-2",
expand: true,
img: "./../static/img/1.jpg",
text: "number five",
children: [
{
title: "leaf 1-2-1",
expand: true,
img: "./../static/img/1.jpg",
text: "number six",
checkbox: true,
},
{
title: "leaf 1-2-2",
expand: true,
img: "./../static/img/1.jpg",
text: "number seven",
checkbox: true,
},
],
},
],
},
],
};
},
methods: {
createTree() {
this.data1 = this.data;
this.createTree2(this.data1);
},
createTree2(data) {
data.forEach((ele) => {
ele.render = (h, { root, node, data }) => {
return h('span', ele.title)
};
if (ele.children && ele.children.length > 0) {
this.createTree2(ele.children);
}
});
},
},
mounted() {
this.createTree();
},
};
</script>
<style>
.ivu-tree .ivu-icon {
color: aquamarine;
}
</style>
改造
以写法二改造：
Tree渲染叶节点多选框
data.forEach((ele) => {
ele.render = (h, { root, node, data }) => {
return h("span", [
h("Checkbox", {
attrs: {
value: data.checked,
},
on: {
"on-change": (event) => {
console.log(event);
},
},
}),
[h("span", data.title)],
]);
};
if (ele.children && ele.children.length > 0) {
this.createTree2(ele.children);
}
});
效果图：
Tree渲染三级叶节点多选框
data.forEach((ele) => {
ele.render = (h, { root, node, data }) => {
if (ele.checkbox) {
return h(
"span",
{
style: {
display: "inline-block",
width: "200px",
},
},
[
h(
"checkbox",
{
style: {
display: "inline-block",
marginLeft: "8px",
},
},
[h("span", data.title)]
),
]
);
} else {
return h(
"span",
{
style: {
display: "inline-block",
},
},
[h("span", data.title)]
);
}
};
if (ele.children && ele.children.length > 0) {
this.createTree2(ele.children);
}
});
效果图：
Tree渲染叶节点-图片
data.forEach((ele) => {
ele.render = (h, { root, node, data }) => {
return h(
"span",
{
style: {
display: "inline-block",
},
},
[
h("img", {
attrs: {
src: data.img,
style: "width: 20px; height: 20px",
},
}),
[h("span", data.title)],
]
);
};
if (ele.children && ele.children.length > 0) {
this.createTree2(ele.children);
}
});
效果图：
Tree渲染叶节点-Tooltip文字提示
data.forEach((ele) => {
ele.render = (h, { root, node, data }) => {
return h(
"Tooltip",
{
props: {
placement: "right-start",
transfer: true,
},
},
[
data.title,
h(
"span",
{
slot: "content",
style: {
whiteSpace: "normal",
},
},
data.text
),
]
);
};
if (ele.children && ele.children.length > 0) {
this.createTree2(ele.children);
}
});
效果图：
Tree渲染叶节点-Icon图标
data.forEach((ele) => {
ele.render = (h, { root, node, data }) => {
return h("span", [
h("Icon", {
props: {
type: "ios-chatbubbles",
size: 12,
},
}),
h('span', ele.title)
]);
};
if (ele.children && ele.children.length > 0) {
this.createTree2(ele.children);
}
});
效果图：
Tree渲染叶节点-Button按钮
data.forEach((ele) => {
ele.render = (h, { root, node, data }) => {
return h("span", [
h(
"Button",
{
props: {
type: "primary",
},
on: {
click: (event) => {
console.log("点我了！");
},
},
},
[h("span", data.title)]
),
]);
效果图：
其他的类似改造就好了
综合-结合多选、树（Tree）的方法
<template>
<Tree ref="tree" :data="data1"> </Tree>
</template>
<script>
import Vue from "vue";
export default {
data() {
return {
data1: [],
data: [
{
title: "parent 1",
expand: true,
img: "./../static/img/1.jpg",
text: "number one",
children: [
{
title: "child 1-1",
expand: true,
img: "./../static/img/1.jpg",
text: "number two",
children: [
{
title: "leaf 1-1-1",
expand: true,
img: "./../static/img/1.jpg",
text: "number three",
checkbox: true,
checked: true,
},
{
title: "leaf 1-1-2",
expand: true,
img: "./../static/img/1.jpg",
text: "number four",
checkbox: true,
checked: false,
},
],
},
{
title: "child 1-2",
expand: true,
img: "./../static/img/1.jpg",
text: "number five",
children: [
{
title: "leaf 1-2-1",
expand: true,
img: "./../static/img/1.jpg",
text: "number six",
checkbox: true,
checked: true,
},
{
title: "leaf 1-2-2",
expand: true,
img: "./../static/img/1.jpg",
text: "number seven",
checkbox: true,
checked: false,
},
],
},
],
},
],
};
},
methods: {
createTree() {
this.data1 = this.data;
this.data1.forEach((ele) => {
console.log(ele, ele.checked);
if (ele.checked) {
this.$refs.tree.node.checked = true;
}
});
this.createTree2(this.data1);
},
createTree2(data) {
data.forEach((ele) => {
ele.render = (h, { root, node, data }) => {
if (ele.checkbox) {
return h(
"span",
{
style: {
display: "inline-block",
width: "200px",
},
},
[
h(
"Checkbox",
{
attrs: {
value: ele.checked,
},
style: {
display: "inline-block",
marginLeft: "8px",
},
on: {
"on-change": (event) => {
this.getChooceCheckbox(this.data1, ele, event);
},
},
},
[h("span", data.title)]
),
]
);
} else {
return h(
"span",
{
style: {
display: "inline-block",
},
},
[h("span", data.title)]
);
}
};
if (ele.children && ele.children.length > 0) {
this.createTree2(ele.children);
}
});
},
getChooceCheckbox(data, node, event) {
let getCheckNode = this.$refs.tree.getCheckedNodes(); //获得已勾选节点
console.log(getCheckNode);
data.forEach((ele) => {
if (ele == node) {
console.log( 11,ele.checked);
if (ele.checked) {
console.log(ele.checked);
Vue.set(ele, "checked", false);
} else {
Vue.set(ele, "checked", true);
}
}
if (ele.children && ele.children.length > 0) {
Vue.set(ele, "checked", false);
this.getChooceCheckbox(ele.children,node);
}
});
},
},
mounted() {
this.createTree();
},
};
</script>
<style>
.ivu-tree .ivu-icon {
color: aquamarine;
}
</style>
let getCheckNode = this.$refs.tree.getCheckedNodes(); //获得已勾选节点
console.log(getCheckNode);
获取到的数据：
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
