在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 相关文章推荐
扩展String功能方法
Sep 22 Javascript
火狐浏览器(firefox)下获得Event对象以及keyCode
Nov 13 Javascript
在Node.js中实现文件复制的方法和实例
Jun 05 Javascript
如何消除inline-block属性带来的标签间间隙
Mar 31 Javascript
JavaScript实现邮箱地址自动匹配功能代码
Nov 28 Javascript
jQuery移除或禁用html元素点击事件常用方法小结
Feb 10 Javascript
jQuery设计思想
Mar 07 Javascript
easyui关于validatebox实现多重规则验证的方法(必看)
Apr 12 Javascript
JavaScript多种滤镜算法实现代码实例
Dec 10 Javascript
js回调函数仿360开机
Dec 26 Javascript
JavaScript 实现HTML DOM增删改查操作的常见方法详解
Jan 04 Javascript
解决Nuxt使用axios跨域问题
Jul 06 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
如何使用PHP中的字符串函数
2006/11/24 PHP
YII Framework框架教程之日志用法详解
2016/03/14 PHP
Laravel中使用Queue的最基本操作教程
2017/12/27 PHP
PHP实现打包zip并下载功能
2018/06/12 PHP
通过代码实例解析PHP session工作原理
2020/12/11 PHP
键盘 keycode的值 javascript时触发事件时很有用的要素
2009/11/02 Javascript
js弹窗代码 可以指定弹出间隔
2010/07/03 Javascript
40款非常有用的 jQuery 插件推荐(系列一)
2011/12/21 Javascript
用JQuery 判断某个属性是否存在hasAttr的解决方法
2013/04/26 Javascript
js截取字符串的两种方法及区别详解
2013/11/05 Javascript
jQuery中toggleClass()方法用法实例
2015/01/05 Javascript
关于JS变量和作用域详解
2016/07/28 Javascript
详解springmvc 接收json对象的两种方式
2016/12/06 Javascript
Bootstrap CSS组件之导航条(navbar)
2016/12/17 Javascript
JavaScript中递归实现的方法及其区别
2017/09/12 Javascript
微信小程序switch组件使用详解
2018/01/31 Javascript
PWA介绍及快速上手搭建一个PWA应用的方法
2019/01/27 Javascript
layui将table转化表单显示的方法(即table.render转为表单展示)
2019/09/24 Javascript
python多进程中的内存复制(实例讲解)
2018/01/05 Python
Python统计python文件中代码,注释及空白对应的行数示例【测试可用】
2018/07/25 Python
python list转矩阵的实例讲解
2018/08/04 Python
使用11行Python代码盗取了室友的U盘内容
2018/10/23 Python
详解Python读取yaml文件多层菜单
2019/03/23 Python
python itchat实现调用微信接口的第三方模块方法
2019/06/11 Python
python3.5 cv2 获取视频特定帧生成jpg图片
2019/08/28 Python
jupyter notebook 实现matplotlib图动态刷新
2020/04/22 Python
高档奢华时装在线目的地:FORWARD by elyse walker
2017/10/16 全球购物
女子锻炼服装和瑜伽服装:Splits59
2019/03/04 全球购物
小学教师自我剖析材料
2014/09/29 职场文书
公司授权委托书格式范文
2014/10/02 职场文书
新闻人物通讯稿
2014/10/09 职场文书
计划生育工作总结2015
2015/04/03 职场文书
广播体操比赛主持词
2015/06/29 职场文书
Go 实现英尺和米的简单单位换算方式
2021/04/29 Golang
python游戏开发之pygame实现接球小游戏
2022/04/22 Python
Valheim服务器 Mod修改安装教程 【ValheimPlus】
2022/12/24 Servers