在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 相关文章推荐
javascript实现动态增加删除表格行(兼容IE/FF)
Apr 02 Javascript
js函数使用技巧之 setTimeout(function(){},0)
Feb 09 Javascript
Table冻结表头示例代码
Aug 20 Javascript
window.location.href = window.location.href 跳转无反应 a超链接onclick事件写法
Aug 21 Javascript
Javascript window对象详解
Nov 12 Javascript
javascript封装 Cookie 应用接口
Aug 07 Javascript
基于jquery css3实现点击动画弹出表单源码特效
Aug 31 Javascript
解析微信JS-SDK配置授权,实现分享接口
Dec 09 Javascript
详解angularJS自定义指令间的相互交互
Jul 05 Javascript
JS实现对json对象排序并删除id相同项功能示例
Apr 18 Javascript
js实现简单的日历显示效果函数示例
Nov 25 Javascript
Javascript幻灯片播放功能实现过程解析
May 07 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
Smarty局部缓存的几种方法简介
2014/06/17 PHP
php实现文件下载代码分享
2014/08/19 PHP
php短址转换实现方法
2015/02/25 PHP
PHP使用Face++接口开发微信公众平台人脸识别系统的方法
2015/04/17 PHP
PHP实现删除字符串中任何字符的函数
2015/08/11 PHP
php 字符串中是否包含指定字符串的多种方法
2018/04/12 PHP
ppk谈JavaScript style属性
2008/10/10 Javascript
TimergliderJS 一个基于jQuery的时间轴插件
2011/12/07 Javascript
js中widow.open()方法使用详解
2013/07/30 Javascript
用box固定长宽实现图片自动轮播js代码
2014/06/09 Javascript
jQuery实现预加载图片的方法
2015/03/17 Javascript
浅谈Jquery核心函数
2015/06/18 Javascript
浅谈JavaScript for循环 闭包
2016/06/22 Javascript
最原始的jQuery注册验证方式
2016/10/11 Javascript
详解Vue组件之间通信的七种方式
2019/04/14 Javascript
[44:50]DOTA2上海特级锦标赛B组小组赛#2 VG VS Fnatic第二局
2016/02/26 DOTA
python在每个字符后添加空格的实例
2018/05/07 Python
python 读取txt,json和hdf5文件的实例
2018/06/05 Python
python3 实现验证码图片切割的方法
2018/12/07 Python
Python Web框架之Django框架Model基础详解
2019/08/16 Python
如何解决cmd运行python提示不是内部命令
2020/07/01 Python
通过实例了解Python异常处理机制底层实现
2020/07/23 Python
Python爬虫如何破解JS加密的Cookie
2020/11/19 Python
css3实现平移效果(transfrom:translate)的示例
2020/11/13 HTML / CSS
德国体育用品网上商店:SC24.com
2016/08/01 全球购物
美国珠宝网上商店:Jeulia
2016/09/01 全球购物
Waterford英国官方网站:世界上最受欢迎的优质水晶品牌
2019/08/17 全球购物
G-Form护具官方网站:美国运动保护装备
2019/09/04 全球购物
同学聚会主持词
2014/03/18 职场文书
房屋继承公证书
2014/04/10 职场文书
我的大学生活演讲稿
2014/04/25 职场文书
大队委竞选演讲稿
2014/04/28 职场文书
2014年冬季防火方案
2014/05/21 职场文书
董事长助理工作职责
2014/06/08 职场文书
学校节能宣传周活动总结
2014/07/09 职场文书
加强作风建设工作总结
2014/10/23 职场文书