how do render-style tree components in iview gracefully bind click events?
work needs to use custom tree components, using iview components, but after using render, you can only write click events in the render function, so there will be multiple click events in the render function, which appears to be redundant and not elegant. Is there any other way to write it?
related codes
<template>
<div class="fss-tree" @click="clickHandler">
<Tree :data="treeData" :render="renderContent" ref="reference"></Tree>
</div>
</template>
<script>
import { Menu, Tree } from "iview"
export default {
name: "fss-tree",
components: {
Menu,
Tree
},
data() {
return {
treeData: [
{
title: "parent 1",
expand: true,
render: (h, { root, node, data }) => {
return h(
"span",
{
style: {
display: "inline-block",
width: "50%"
},
on: {
click() {
// console.log(`root: ${JSON.stringify(root)}`)
// console.log(`node: ${JSON.stringify(node)}`)
// console.log(`data: ${JSON.stringify(data)}`)
// data.expand = !data.expand
}
}
},
[
h("span", [
h("Icon", {
props: {
type: "ios-folder-outline"
},
style: {
marginRight: "8px"
}
}),
h("span", data.title)
])
]
)
},
children: [
{
title: "child 1-1",
expand: true,
children: [
{
title: "leaf 1-1-1",
expand: true
},
{
title: "leaf 1-1-2",
expand: true
}
]
},
{
title: "child 1-2",
expand: true,
children: [
{
title: "leaf 1-2-1",
expand: true
},
{
title: "leaf 1-2-1",
expand: true
}
]
}
]
}
],
buttonProps: {
type: "ghost",
size: "small"
}
}
},
methods: {
renderContent(h, { root, node, data }) {
return h("span",
{
style: {
display: "inline-block",
width: "60%"
}
},
[
h("span", [
h("Icon", {
props: {
type: data.title.includes("child") ? "ios-folder-outline" : "ios-paper-outline"
},
style: {
marginRight: "8px"
}
}),
h("span", data.title)
])
]
)
},
clickHandler() {
console.log(this.$refs.reference)
}
}
}
</script>
