方法，一般都是用改方法来创建VNode。此方法包含三个参数：
第一个参数：可以使一个HTML标签字符串，组件选项对象，或者是一个解释上述任一的async异步函数。必需参数；
第二个参数：
包含模板相关属性的数据对象。可选参数；
第三个参数：自虚拟节点。由
`createElement()`
构建而成，也可以使用字符串。可选参数
回归问题：让a标签添加target属性，是相关的数据对象，所以需要传入第二个参数。
render: function (createElement) {
return createElement(
'a',
{
'class': {},
style: {
color: 'orange'
},
// 普通的 HTML 特性
attrs: {
target: '_blank'
}
}
)
}
VUE一般使用template来创建HTML，然后在有的时候，我们需要使用javascript来创建html，这时候我们需要使用render函数。比如如下我想要实现如下html：
<div id="container">
<h1>
<a href="#">
Hello world!
</a>
</h1>
</div>
我们会如下使用：
<!DOCTYPE html>
<html>
<head>
<title>演示Vue</title>
<style>
</style>
</head>
<body>
<div id="container">
<tb-heading :level="1">
Vueel-tree可以使用自定义渲染来实现每个节点后面添加输入框并保存的功能，具体步骤如下：1. 在Vueel-tree组件中添加render属性，用于渲染树节点：
<el-tree :data="data" :render-content="renderContent"></el-tree>
2. 在methods中定义renderContent函数，用于渲染树节点：
methods: { renderContent(h, { node, data }) { return h('span', [ h('span', node.label), h('el-input', { props: { value: data.inputValue }, on: { input: val =>{ data.inputValue = val } } }) ]) } }
3. 在data中定义inputValue，用于保存输入框的值：
data() { return { data: [], inputValue: '' } }
4. 在Vueel-tree组件中添加node-key属性，用于设置节点的key值：
<el-tree :data="data" :render-content="renderContent" node-key="id"></el-tree>
5. 在data中定义id，用于设置节点的key值：
data() { return { data: [ { id: 1, label: 'node1' }, { id: 2, label: 'node2' } ], inputValue: '' } }
这样，就可以在Vueel-tree组件中实现每个节点后面添加输入框并保存的功能了。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）