在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 相关文章推荐
农历与西历对照
Sep 06 Javascript
基于JQuery的简单实现折叠菜单代码
Sep 15 Javascript
jQuery选择器的工作原理和优化分析
Jul 25 Javascript
jQuery实现别踩白块儿网页版小游戏
Jan 18 Javascript
JavaScript框架Angular和React深度对比
Nov 20 Javascript
小程序实现列表删除功能
Oct 30 Javascript
Vue源码探究之状态初始化
Nov 14 Javascript
Vue 实现前进刷新后退不刷新的效果
Jun 14 Javascript
jquery实现垂直无限轮播的方法分析
Jul 16 jQuery
解决layer.prompt无效的问题
Sep 24 Javascript
vue v-for直接循环数字实例
Nov 07 Javascript
vue完美实现el-table列宽自适应
May 08 Vue.js
微信小程序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
树型结构列出指定目录里所有文件的PHP类
2006/10/09 PHP
浅析PHP水印技术
2007/02/14 PHP
PHP实现的封装验证码类详解
2013/06/18 PHP
php读取csv实现csv文件下载功能
2013/12/18 PHP
ThinkPHP实现事务回滚示例代码
2014/06/23 PHP
php将金额数字转化为中文大写
2015/07/09 PHP
yii2学习教程之5种内置行为类详解
2017/08/03 PHP
Laravel学习教程之本地化模块
2017/08/18 PHP
PHP htmlentities()函数用法讲解
2019/02/25 PHP
浅析Prototype的模板类 Template
2011/12/07 Javascript
jQuery插件开发全解析
2012/10/10 Javascript
JSON为什么那样红为什么要用json(另有洞天)
2012/12/26 Javascript
Javascript 字符串模板的简单实现
2016/02/13 Javascript
Bootstrap中的Dropdown下拉菜单更改为悬停(hover)触发
2016/08/31 Javascript
jQuery实现的简单拖拽功能示例
2016/09/13 Javascript
基于JS快速实现导航下拉菜单动画效果附源码下载
2016/10/27 Javascript
使用Vue构建可重用的分页组件
2018/03/26 Javascript
[01:33:14]LGD vs VP Supermajor 败者组决赛 BO3 第二场 6.10
2018/07/04 DOTA
python中list列表的高级函数
2016/05/17 Python
基于python脚本实现软件的注册功能(机器码+注册码机制)
2016/10/09 Python
深入浅析Python传值与传址
2018/07/10 Python
对python当中不在本路径的py文件的引用详解
2018/12/15 Python
python射线法判断一个点在图形区域内外
2019/06/28 Python
用python拟合等角螺线的实现示例
2019/12/27 Python
python help函数实例用法
2020/12/06 Python
Python文件名匹配与文件复制的实现
2020/12/11 Python
美国一家主营日韩美妆护肤品的在线商店:iMomoko
2016/09/11 全球购物
美国LOGO设计公司:The Logo Company
2018/07/16 全球购物
保加利亚运动鞋购物网站:SneakerStudio.bg
2020/12/23 全球购物
自荐信的五个重要部分
2013/10/29 职场文书
争先创优演讲稿
2014/09/15 职场文书
2014年法院个人工作总结
2014/12/17 职场文书
老公保证书怎么写
2015/02/26 职场文书
刑事上诉状(无罪)
2015/05/23 职场文书
实习报告范文
2019/07/30 职场文书
elasticSearch-api的具体操作步骤讲解
2021/06/28 Java/Android