在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 相关文章推荐
struts2 jquery 打造无限层次的树
Oct 23 Javascript
JS 对象属性相关(检查属性、枚举属性等)
Apr 05 Javascript
JS利用正则表达式实现简单的密码强弱判断实例
Jun 16 Javascript
BootStrap Table实现server分页序号连续显示功能(当前页从上一页的结束序号开始)
Sep 12 Javascript
基于js中的存储键值对以及注意事项介绍
Mar 30 Javascript
解决Vue在封装了Axios后手动刷新页面拦截器无效的问题
Nov 08 Javascript
JavaScript继承与聚合实例详解
Jan 22 Javascript
使用javascript做时间倒数读秒功能的实例
Jan 23 Javascript
详解vue2.0模拟后台json数据
May 16 Javascript
微信小程序中button去除默认的边框实例代码
Aug 01 Javascript
详解利用eventemitter2实现Vue组件通信
Nov 04 Javascript
解决vue v-for src 图片路径问题 404
Nov 12 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
如何去掉文章里的 html 语法
2006/10/09 PHP
PHP 类商品秒杀计时实现代码
2010/05/05 PHP
PHP 数组基础知识小结
2010/08/20 PHP
ThinkPHP3.1基础知识快速入门
2014/06/19 PHP
PHP strcmp()和strcasecmp()的区别实例
2016/11/05 PHP
php 广告点击统计代码(php+mysql)
2018/02/21 PHP
你所要知道JS(DHTML)中的一些技巧
2007/01/09 Javascript
用倒置滤镜把div倒置,再把table倒置。
2007/07/31 Javascript
Javascript基础教程之break和continue语句
2015/01/18 Javascript
JavaScript显示当前文档最后修改日期的方法
2015/03/19 Javascript
JavaScript中的toLocaleDateString()方法使用简介
2015/06/12 Javascript
学习JavaScript设计模式(链式调用)
2015/11/26 Javascript
js父页面中使用子页面的方法
2016/01/09 Javascript
微信小程序 tabs选项卡效果的实现
2017/01/05 Javascript
js控制随机数生成概率代码实例
2019/03/21 Javascript
jQuery提示框插件SweetAlert用法分析
2019/08/05 jQuery
对Layer UI 模块化的用法详解
2019/09/26 Javascript
JS中间件设计模式的深入探讨与实例分析
2020/04/11 Javascript
小程序中手机号识别的示例
2020/12/14 Javascript
python list排序的两种方法及实例讲解
2017/03/20 Python
cmd运行python文件时对结果进行保存的方法
2018/05/16 Python
Python代码块批量添加Tab缩进的方法
2018/06/25 Python
Python中pip更新和三方插件安装说明
2018/07/08 Python
Python引用计数操作示例
2018/08/23 Python
python带参数打包exe及调用方式
2019/12/21 Python
Python3实现建造者模式的示例代码
2020/06/28 Python
Django数据库迁移常见使用方法
2020/11/12 Python
加拿大最大的相机店:Henry’s
2017/05/17 全球购物
介绍一下Ruby的多线程处理
2013/02/01 面试题
js实现弹框效果
2021/03/24 Javascript
师德师风个人反思
2014/04/28 职场文书
任命书模板
2014/06/04 职场文书
党的群众教育实践活动实施方案
2014/06/12 职场文书
面试复试通知单
2015/04/24 职场文书
企业管理制度设计时要注意的几种“常见病”!
2019/04/19 职场文书
Java Spring读取和存储详细操作
2022/08/05 Java/Android