在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 相关文章推荐
详细介绍8款超实用JavaScript框架
Oct 25 Javascript
移动节点的jquery代码
Jan 13 Javascript
js实现日历可获得指定日期周数及星期几示例分享(js获取星期几)
Mar 14 Javascript
JavaScript中string对象
Jun 12 Javascript
QQ登录背景闪动效果附效果演示源码下载
Sep 22 Javascript
Angular工具方法学习
Dec 26 Javascript
详解JS: reduce方法实现 webpack多文件入口
Feb 14 Javascript
shiro授权的实现原理
Sep 21 Javascript
不使用JavaScript实现菜单的打开和关闭效果demo
May 01 Javascript
vue设计一个倒计时秒杀的组件详解
Apr 06 Javascript
Vue.js实现大屏数字滚动翻转效果
Nov 29 Javascript
vue项目使用$router.go(-1)返回时刷新原来的界面操作
Jul 26 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 curl 并发最佳实践代码分享
2012/09/05 PHP
PHP不用递归遍历目录下所有文件的代码
2014/07/04 PHP
php绘图之在图片上写中文和英文的方法
2015/01/24 PHP
php遍历、读取文件夹中图片并分页显示图片的方法
2016/11/15 PHP
JS中confirm,alert,prompt函数使用区别分析
2010/04/01 Javascript
调试代码导致IE出错的避免方法
2014/04/04 Javascript
详谈JavaScript 匿名函数及闭包
2014/11/14 Javascript
Shell脚本实现Linux系统和进程资源监控
2015/03/05 Javascript
JavaScript对数组进行随机重排的方法
2015/07/22 Javascript
JavaScript Math 对象常用方法总结
2016/04/28 Javascript
Angular.JS通过指令操作DOM的方法
2017/05/10 Javascript
angularjs实现过滤并替换关键字小功能
2017/09/19 Javascript
vue给对象动态添加属性和值的实例
2019/09/09 Javascript
Vue在H5 项目中使用融云进行实时个人单聊通讯
2020/12/14 Vue.js
点球小游戏python脚本
2018/05/22 Python
12个步骤教你理解Python装饰器
2019/07/01 Python
python3 webp转gif格式的实现示例
2019/12/10 Python
python+opencv边缘提取与各函数参数解析
2020/03/09 Python
Pycharm修改python路径过程图解
2020/05/22 Python
Python 使用SFTP和FTP实现对服务器的文件下载功能
2020/12/17 Python
英国在线潜水商店:Simply Scuba
2019/03/25 全球购物
罗技美国官网:Logitech美国
2020/01/22 全球购物
配置管理计划的主要内容有哪些
2014/06/20 面试题
销售自荐信
2013/10/22 职场文书
幼师自荐信
2013/10/26 职场文书
公积金转移接收函
2014/01/11 职场文书
《小石潭记》教学反思
2014/02/13 职场文书
中学生2014国庆节演讲稿:不屈的民族
2014/09/21 职场文书
自查自纠工作情况报告
2014/10/29 职场文书
2014年科研工作总结
2014/12/03 职场文书
2014社区健康教育工作总结
2014/12/16 职场文书
2019假期福利管理制度!
2019/07/15 职场文书
超详细教你怎么升级Mysql的版本
2021/05/19 MySQL
Python激活Anaconda环境变量的详细步骤
2021/06/08 Python
spring IOC容器的Bean管理XML自动装配过程
2022/05/30 Java/Android
CentOS7环境下MySQL8常用命令小结
2022/06/10 Servers