在元素用户界面的埃尔树组件中用提出函数生成埃尔按钮的实例代码

本文主要介绍怎么在埃尔树组件中通过提出函数来生成埃尔-巴顿。

这是元素用户界面中埃尔树树：

这是需要实现的效果：

tree.vue文件中，具体实现的代码如下：

模板El-tree : data=' treeddata ' : props=' defaultProps ' show-checkbox node-key=' id ' default-expand-all : expand-on-click-node=' false ' : render-content=' render content '/El-tree/模板脚本导出默认值{ name: 'tree '，data : function(){ return { treeData :[{ id 33: 1，label: '一级，代码：'1 '，children: [{ id: 4，label: '二级，代码：'1-1 '，children: [{ id: 9，label: '三级，代码：'1-1-1 '，}，{ id: 10，标签: '三级，code: '1-1-2 '，}] }] }])，default prop 3360 { children : ' children '，label: 'label' } } }，方法： { render content : function(h，data){ return h('span '，{}，[ h('span '，data.data.label ': ')，h('span '，{ class: ' leftSpan '，dompp 3360 { class :删除)]) } } }/scriptstyle . leftSpan{ color:道奇蓝色；左边距left: 15px}。浮动平移{右侧浮动：边距-top : 8px；右边距： 10pxpadding: 5px }。El-tree { width : 33%；margin: 92px auto}/样式主要说下这段代码：

renderContent:function(h，data){ return h('span '，{}，[ h('span '，data.data.label ': ')，h('span '，{ class: ' leftSpan，DOM props 3360 { inner html 3360 data }。数据。代码} })，h('el-button '，{ class:'floatSpan '，props: { type: ' danger ' }，'删除') ]) }文档中有详细的说明：https://cn。vuejs。org/v2/guide/render-function超文本标记语言

h(//参数1:{字符串|对象|函数},一个超文本标记语言标签字符串，组件选项对象，或解析任何一种的一个异步非同步(异步)异步函数，必需参数“el-button”，//参数2:{对象}一个包含模板相关属性的数据对象，可以在模板中使用这些特性，可选参数{}, //参数3:{字符串|数组},如果直接是字符串则会生成"文本虚拟节点；如果是数组，则可以在数组中，则可以生成子虚拟节点'删除)参数2中的对象在文档中有详细的介绍：

{//与' v-bind : class '/相同的API接收字符串、对象或字符串和对象的数组' class' 3360 {foo: true，bar: false}。//与' v-bind:style'/相同的API接收字符串、对象或对象数组，style: {color3360' red '，fontsize:' 14px'}。//常见的HTML属性attrs: {id: 'foo' }，//组件props: { myprop3360 ' bar ' }，//DOM属性domprops: { innerhtml3360 ' baz ' }，//事件侦听器基于` on` //，因此不再支持` v-: keyup .输入` modifier//，需要手动匹配keyCode。在： {点击：这个。clickhandler}、//仅用于组件，用于监视本机事件，而不是//`vm触发的事件。$emit `在组件内部。本机于： {点击：此。nativeclickhandler}，//自定义指令。请注意，您不能在“绑定”中为“旧值”//赋值，因为Vue已经自动为您同步了它。directives :[{ name : ' my-custom-direction '，value: '2 '，expression: '1 1 '，arg: 'foo '，modifier s 3360 { bar : true } }]，//作用域槽格式//{ name : props=vnode | array vnode }作用域槽3360 { default : props=create element(' span '，props.text)}。//如果组件是其他组件的子组件，则插槽需要命名为slot:“插槽名称”。//其他特殊顶级属性key3360' mykey '，ref3360' myref '。//如果在渲染函数中对多个元素应用相同的引用名称，`$refs.myRef '将成为一个数组。RefInFor: true}摘要

以上是边肖介绍的在element-ui的el-tree组件中用render函数生成el-button的示例代码。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！