在element-ui的el-tree组件中用render函数生成el-button的实例代码


Posted in Javascript onNovember 05, 2018

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

这是element-ui中el-tree树:

在element-ui的el-tree组件中用render函数生成el-button的实例代码

这是需要实现的效果:

在element-ui的el-tree组件中用render函数生成el-button的实例代码

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的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JQuery 写的个性导航菜单
Dec 24 Javascript
jquery下组织javascript代码(js函数化)
Aug 25 Javascript
Three.js源码阅读笔记(光照部分)
Dec 27 Javascript
JS的Document属性和方法小结
Sep 17 Javascript
AngularJS HTML编译器介绍
Dec 06 Javascript
JavaScript中setFullYear()方法的使用详解
Jun 11 Javascript
基于Bootstrap和jQuery构建前端分页工具实例代码
Nov 23 Javascript
微信小程序实现下载进度条的方法
Dec 08 Javascript
js实现json数组分组合并操作示例
Feb 12 Javascript
记录一次开发微信网页分享的步骤
May 07 Javascript
Vue2.x通用条件搜索组件的封装及应用详解
May 28 Javascript
vue实现百度搜索功能
Dec 28 Javascript
微信小程序http连接访问解决方案的示例
Nov 05 #Javascript
vue多级复杂列表展开/折叠及全选/分组全选实现
Nov 05 #Javascript
浅谈Vue数据响应
Nov 05 #Javascript
vue+canvas实现炫酷时钟效果的倒计时插件(已发布到npm的vue2插件,开箱即用)
Nov 05 #Javascript
基于vue2的canvas时钟倒计时组件步骤解析
Nov 05 #Javascript
基于Vue2实现简易的省市区县三级联动组件效果
Nov 05 #Javascript
使用vue2实现带地区编号和名称的省市县三级联动效果
Nov 05 #Javascript
You might like
DOMXML函数笔记
2006/10/09 PHP
zf框架的registry(注册表)使用示例
2014/03/13 PHP
PHP编程实现微信企业向用户付款的方法示例
2017/07/26 PHP
关于PHP中协程和阻塞的一些理解与思考
2017/08/11 PHP
PHP使用ajax的post方式下载excel文件简单示例
2019/08/06 PHP
javascript支持firefox,ie7页面布局拖拽效果代码
2007/12/20 Javascript
javascript显示选择目录对话框的代码
2008/11/10 Javascript
window.location.reload()方法刷新页面弹出要再次显示该网页对话框
2013/04/24 Javascript
JS+css 图片自动缩放自适应大小
2013/08/08 Javascript
cookie的复制与使用记住用户名实现代码
2013/11/04 Javascript
JS 打印功能代码可实现打印预览、打印设置等
2014/10/31 Javascript
js中 javascript:void(0) 用法详解
2015/08/11 Javascript
jQuery遮罩层效果实例分析
2016/01/14 Javascript
JQuery控制DIV的选取实现方法
2016/09/18 Javascript
Angular ui.bootstrap.pagination分页
2017/01/20 Javascript
fullCalendar中文API官方文档
2017/02/07 Javascript
JavaScript下拉菜单功能实例代码
2017/03/01 Javascript
VueJS组件之间通过props交互及验证的方式
2017/09/04 Javascript
vue 实现全选全不选的示例代码
2018/03/29 Javascript
VUE预渲染及遇到的坑
2018/09/03 Javascript
JavaScript实现简单音乐播放器
2020/04/17 Javascript
vue.js的双向数据绑定Object.defineProperty方法的神奇之处
2019/01/18 Javascript
JS实现判断数组是否包含某个元素示例
2019/05/24 Javascript
搭建一个Koa后端项目脚手架的方法步骤
2019/05/30 Javascript
[01:04:06]DOTA2上海特级锦标赛A组资格赛#2 Secret VS EHOME第一局
2016/02/26 DOTA
[01:45:05]VGJ.T vs Newbee Supermajor 败者组 BO3 第二场 6.6
2018/06/07 DOTA
详解Django中的form库的使用
2015/07/18 Python
Python迭代器和生成器定义与用法示例
2018/02/10 Python
python批量图片处理简单示例
2019/08/06 Python
Python 异常处理Ⅳ过程图解
2019/10/18 Python
Python编写单元测试代码实例
2020/09/10 Python
python 读取串口数据的示例
2020/11/09 Python
HTML5使用Audio标签实现歌词同步的效果
2016/03/17 HTML / CSS
便利店促销方案
2014/02/20 职场文书
教师工作态度自我评价
2015/03/05 职场文书
个人工作决心书
2015/09/22 职场文书