本文主要介绍怎么在el-tree组件中通过render函数来el-button。

这是element-ui中el-tree树:

这是需要实现的效果:

tree.vue文件中,具体实现的代码如下:

<template>
<el-tree
:data="treeData"
:props="defaultProps"
show-checkbox
node-key="id"
default-expand-all
:expand-on-click-node="false"
:render-content="renderContent">
</el-tree>
</template> <script>
export default {
name: 'tree',
data:function(){
return {
treeData: [{
id: 1,
label: '一级',
code:'1',
children: [{
id: 4,
label: '二级',
code:'1-1',
children: [{
id: 9,
label: '三级',
code:'1-1-1',
}, {
id: 10,
label: '三级',
code: '1-1-2',
}]
}]
}],
defaultProps: {
children: 'children',
label: 'label'
}
}
},
methods:{
renderContent:function(h,data){
return h('span',{},[
h('span',data.data.label+":"),
h("span",{
class:'leftSpan',
domProps:{
innerHTML:data.data.code
}
}),
h("el-button",{
class:'floatSpan',
props:{
type:'danger'
}
},'删除')
])
}
}
}
</script> <style>
.leftSpan{
color: dodgerblue;
margin-left: 15px;
}
.floatSpan{
float: right;
margin-top: 8px;
margin-right: 10px;
padding: 5px;
}
.el-tree {
width: 33%;
margin: 92px auto;
} </style>

主要说下这段代码:

 renderContent:function(h,data){
return h('span',{},[
h('span',data.data.label+":"),
h("span",{
class:'leftSpan',
domProps:{
innerHTML:data.data.code
}
}),
h("el-button",{
class:'floatSpan',
props:{
type:'danger'
}
},'删除')
])
}

文档中有详细的说明:https://cn.vuejs.org/v2/guide/render-function.html

  h(
//参数1:{String | Object | Function},一个HTML标签字符串,组件选项对象,或解析任何一种的一个async异步函数,必需参数。
'el-button',
//参数2:{Object} 一个包含模板相关属性的数据对象,可以在template中使用这些特性,可选参数
{},
//参数3: {String | Array},如果直接是字符串则会生成“文本虚拟节点;如果是数组,则可以在数组中,则可以生成子虚拟节点
'删除'
)

参数2中的对象在文档中有详细的介绍:

{
// 和`v-bind:class`一样的 API
// 接收一个字符串、对象或字符串和对象组成的数组
'class': {
foo: true,
bar: false
},
// 和`v-bind:style`一样的 API
// 接收一个字符串、对象或对象组成的数组
style: {
color: 'red',
fontSize: '14px'
},
// 普通的 HTML 特性
attrs: {
id: 'foo'
},
// 组件 props
props: {
myProp: 'bar'
},
// DOM 属性
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',
// 其他特殊顶层属性
key: 'myKey',
ref: 'myRef',
// 如果你在渲染函数中向多个元素都应用了相同的 ref 名,
// 那么 `$refs.myRef` 会变成一个数组。
refInFor: true
}

在element-ui的el-tree组件中用render函数生成el-button的更多相关文章

  1. Element ui 上传文件组件(单文件上传) 点击提交 没反应

    element ui 第一次上传文件后 上传其他文件再次点击不再次提交 需要使用 clearFiles 清空已上传文件列表 这时候在次点击 上传按钮 就会惊喜的发现 可以上传了使用方法 this.$r ...

  2. 基于element ui的级联选择器组件实现的分类后台接口

    今天在做资产管理系统的时候遇到一个分类的级联选择器,前端是用的element的组件,需要后台提供接口支持.     这个组件需要传入的数据结构大概是这样的,详细的可参考官方案例: [{ value: ...

  3. Element ui 中使用table组件实现分页记忆选中

    我们再用vue和element-ui,或者其他的表格的时候,可能需要能记忆翻页勾选,那么实现以下几个方法就ok了 示例如下 <el-table :data="tableData&quo ...

  4. 关于Element UI中页面样式小问题

    一,修改组件dialog窗口的大小 二,在我使用upload组件上传一张美女图片时,发现当预览图片时,图片是灰色的,点击一下才会变亮,这种效果使我很不舒服,于是我通过添加下面的一条样式,问题解决了(可 ...

  5. Vue+Element UI 实现视频上传

    一.前言 项目中需要提供一个视频介绍,使用户能够快速.方便的了解如何使用产品以及注意事项. 前台使用Vue+Element UI中的el-upload组件实现视频上传及进度条展示,后台提供视频上传AP ...

  6. element UI table 过滤 筛选问题

    一.问提描述    使用elementUI table 官方筛选案例,发现筛选不是服务器端筛选,而是浏览器端对每一页进行单独筛选. 如何在服务器端筛选? 二.查询Element UI 官网table组 ...

  7. 封装Vue Element的upload上传组件

    本来昨天就想分享封装的这个upload组件,结果刚写了两句话,就被边上的同事给偷窥上了,于是在我全神贯注地写分享的时候他就神不知鬼不觉地突然移动到我身边,腆着脸问我在干啥呢.卧槽你妈,当场就把我吓了一 ...

  8. 05 element.ui 全局配置

    element.ui css样式在组件里面改有的不会生效,是因为加了scoped.局部作用,放在这里是全局配置  

  9. vue+element ui 的表格列使用组件

    前言:工作中用到 vue+element ui 的前端框架,有这个场景:很多表格的列有许多一样的,所以考虑将列封装为组件.转载请注明出处:https://www.cnblogs.com/yuxiaol ...

随机推荐

  1. linux中 ll 和ls 区别

    ll 列出来的结果详细,有时间,是否可读写等信息 ,象windows里的 详细信息ls 只列出文件名或目录名 就象windows里的  列表 ll -t 是降序,  ll -t | tac 是升序 l ...

  2. Vue 项目优化,持续更新...

    一.减少打包的体积 通过vue-cli 初始化项目后,使用 npm run build 生成的JS文件往往会很大,加载时间过长导致页面长时间白屏,所以我们尽可能的使用一下方法来减少打包体积. 1.1 ...

  3. python求100以内素数

    python求100以内素数之和 from math import sqrt # 使用isPrime函数 def isPrime(n): if n <= 1: return False for ...

  4. JS优先队列排序。出队时,先找出优先级最高的元素,再按照先进先出出队。

    JS优先队列排序.出队时,先找出优先级最高的元素,再按照先进先出出队. /* * 优先队列 * 出队时,先找出优先级最高的元素,再按照先进先出出队. * */ function Queue(){ th ...

  5. PHP相关异常

    1. Maximum execution time of 30 seconds exceeded 报错一:内存超限,具体报错语句忘了,简单说一下解决办法 1> 利用循环分批导入: 2> 每 ...

  6. Jsp页面用ajax传输json数组的方法

    详细参考jquery的API 这里主要展示实例,即写法 <%@ page language="java" contentType="text/html; chars ...

  7. Android studio 获取每次编译apk时的日期

    项目中需要获取apk的编译日期,首先肯定是用手动的方式获取,但这样容易遗忘,怎么样通过代码的方式获取呢? 其实android 为我们提供了一个BuildConfig的类,android 每次编译的时候 ...

  8. CentOS6.5下Ambari安装搭建部署大数据集群(图文分五大步详解)(博主强烈推荐)

    第一步: Ambari安装之Ambari安装前准备(CentOS6.5)(一) 第二步: Ambari安装之部署本地库(镜像服务器)(二) 第三步: Ambari安装之安装并配置Ambari-serv ...

  9. Windows 8的语音识别

    不多说,直接干货! 第一步:启动windows 语音识别窗口 第二步:设置windows 语音识别窗口 第三步:使用windows 语音识别窗口来输入文字  成功!!! 欢迎大家,加入我的微信公众号: ...

  10. __name__ == "__main__"的作用是什么?

    问题: __name__ == "__main__" 的作用是什么? # Threading example import time, thread def myfunction( ...