本文主要介绍怎么在el-tree组件中通过渲染函数来生成el-button。
这是element-ui中el-tree树:
这是需要实现的效果:
tree.vue文件中,具体实现的代码如下:
& lt; template>
& lt; el-tree
:数据=" https://www.yisu.com/zixun/treeData "
:道具=" defaultProps”
show-checkbox
node-key=" id "
default-expand-all
:expand-on-click-node=" false "
:呈现内容=皉enderContent”比;
& lt;/el-tree>
& lt;/template>
& lt; script>
出口默认{
名称:“树”,
数据:函数(){
返回{
treeData: [{
id: 1、
标签:“一级”,
代码:' 1 ',
孩子们:[{
id: 4
标签:“二级”,
代码:“1”,
孩子们:[{
id: 9,
标签:“三级”,
代码:“1-1-1”,
}, {
id: 10
标签:“三级”,
代码:“1-1-2”,
})
})
}]，
defaultProps: {
孩子们:“孩子”,
标签:“标签”
}
}
},
方法:{
renderContent:函数(h,数据){
返回h(“跨越”,{},
h(“跨越”,data.data.label +“:”),
h(“跨度”{
类:“leftSpan”,
domProps: {
innerHTML: data.data.code
}
}），
h (“el-button”{
类:“floatSpan”,
道具:{
类型:“危险”
}
},删除”)
])
}
}
}
& lt;/script>
& lt; style>
.leftSpan {
颜色:dodgerblue;
margin-left: 15 px;
}
.floatSpan {
浮:正确;
margin-top: 8 px;
margin-right: 10 px;
填充:5 px;
}
.el-tree {
宽度:33%;
保证金:92 px的汽车;
}
& lt;/style>
主要说下这段代码:
renderContent:函数(h,数据){
返回h(“跨越”,{},
h(“跨越”,data.data.label +“:”),
h(“跨度”{
类:“leftSpan”,
domProps: {
innerHTML: data.data.code
}
}），
h (“el-button”{
类:“floatSpan”,
道具:{
类型:“危险”
}
},删除”)
])
}
文档中有详细的说明:https://cn.vuejs.org/v2/guide/render-function.html
h (//参数1:{}字符串| |对象函数,一个HTML标签字符串,组件选项对象,或解析任何一种的一个异步异步函数,必需参数。
“el-button”,//参数2:{对象}一个包含模板相关属性的数据对象,可以在模板中使用这些特性,可选参数
{},//参数3:{}字符串|数组,如果直接是字符串则会生成“文本虚拟节点,如果是数组,则可以在数组中,则可以生成子虚拟节点
“删除的
)
参数2中的对象在文档中有详细的介绍:
{//和v-bind:类的一样的API//接收一个字符串,对象或字符串和对象组成的数组
“类”:{
foo:没错,
酒吧:假
},//和“v-bind:风格”一样的API//接收一个字符串,对象或对象组成的数组
风格:{
颜色:红色,
字形大小:“14 px”
},//普通的HTML特性
attrs: {
id:“foo”
},//组件道具
道具:{
myProp:“酒吧”
},//DOM属性
domProps: {
innerHTML:“记者”
},//事件监听器基于“上”//所以不再支持如“v:按键弹起。进入“修饰器//需要手动匹配键码。
:{
点击:this.clickHandler
},//仅用于组件,用于监听原生事件,而不是组件内部使用//vm。发出“美元触发的事件。
nativeOn: {
点击:this.nativeClickHandler
},//自定义指令。注意,你无法对“绑定”中的“oldValue”//赋值,因为Vue已经自动为你进行了同步。
指示:[
{
名称:“my-custom-directive”,
值:' 2 ',
表情:“1 + 1”,
参数:“foo”,
修饰符:{
酒吧:真
}
}
),//作用域插槽格式//{名称:道具=比;VNode | Array}
scopedSlots: {
默认值:道具=比;createElement(“跨越”,props.text)
},//如果组件是其他组件的子组件,需为插槽指定名称
槽:“name-of-slot”,//其他特殊顶层属性
关键:myKey,
裁判:“myRef”,//如果你在渲染函数中向多个元素都应用了相同的ref名,//那么的美元。参考文献myRef”会变成一个数组。
refInFor:真
}
