在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 相关文章推荐
五段实用的js高级技巧
Dec 20 Javascript
事件委托与阻止冒泡阻止其父元素事件触发
Sep 02 Javascript
JavaScript实现网页对象拖放功能的方法
Apr 15 Javascript
JQuery中层次选择器用法实例详解
May 18 Javascript
Vue.js每天必学之数据双向绑定
Sep 05 Javascript
jQuery利用sort对DOM元素进行排序操作
Nov 07 Javascript
canvas实现图像布局填充功能
Feb 06 Javascript
JavaScript实现三级联动菜单实例代码
Jun 26 Javascript
js实现手机web图片左右滑动效果
Dec 29 Javascript
用jquery获取select标签中选中的option值及文本的示例
Jan 25 jQuery
24个解决实际问题的ES6代码片段(小结)
Feb 02 Javascript
vue祖孙组件之间的数据传递案例
Dec 07 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
从康盛产品(discuz)提取出来的模板类
2011/06/28 PHP
php通过array_merge()函数合并两个数组的方法
2015/03/18 PHP
codeigniter显示所有脚本执行时间的方法
2015/03/21 PHP
js变量作用域及可访问性的探讨
2006/11/23 Javascript
动态加载dtree.js树treeview(示例代码)
2013/12/17 Javascript
angular简介和其特点介绍
2015/01/29 Javascript
jquery-tips悬浮提示插件分享
2015/07/31 Javascript
jquery实现带渐变淡入淡出并向右依次展开的多级菜单效果实例
2015/08/22 Javascript
实例解析jQuery中proxy()函数的用法
2016/05/24 Javascript
JavaScript基本类型值-Number类型
2017/02/24 Javascript
Node.JS中快速扫描端口并发现局域网内的Web服务器地址(80)
2017/09/18 Javascript
jQuery实现简单日期格式化功能示例
2017/09/19 jQuery
微信小程序倒计时功能实例代码
2018/07/17 Javascript
angular6 填坑之sdk的方法
2018/12/27 Javascript
js 将线性数据转为树形的示例代码
2019/05/28 Javascript
微信小程序swiper禁止用户手动滑动代码实例
2019/08/23 Javascript
js找出5个数中最大的一个数和倒数第二大的数实现方法示例小结
2020/03/04 Javascript
Python urlopen 使用小示例
2008/09/06 Python
Python2.7读取PDF文件的方法示例
2017/07/13 Python
python 处理dataframe中的时间字段方法
2018/04/10 Python
Python文本处理简单易懂方法解析
2019/12/19 Python
python+selenium+Chrome options参数的使用
2020/03/18 Python
Django添加bootstrap框架时无法加载静态文件的解决方式
2020/03/27 Python
浅析python字符串前加r、f、u、l 的区别
2021/01/24 Python
美国中小型企业领先的办公家具供应商:Office Designs
2016/11/26 全球购物
英国潮流网站:END.(全球免邮)
2017/01/16 全球购物
Does C# support multiple inheritance? (C#支持多重继承吗)
2012/01/04 面试题
关于廉洁的广播稿
2014/01/30 职场文书
教师现实表现材料
2014/02/14 职场文书
代领毕业证委托书
2014/08/02 职场文书
中学教师师德师风演讲稿
2014/08/22 职场文书
物业项目经理岗位职责
2015/04/01 职场文书
幼儿园小班工作总结2015
2015/04/25 职场文书
银行保安拾金不昧表扬稿
2015/05/05 职场文书
工作失职检讨书范文
2015/05/05 职场文书
解决Golang中goroutine执行速度的问题
2021/05/02 Golang