在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 相关文章推荐
把input初始值不写value的具体实现方法
Jul 04 Javascript
最短的IE判断var ie=!-[1,]分析
May 28 Javascript
js对象浅拷贝和深拷贝详解
Sep 05 Javascript
Bootstrap在线电子商务网站实战项目5
Oct 14 Javascript
通过npm引用的vue组件使用详解
Mar 02 Javascript
小程序实现左右来回滚动字幕效果
Dec 28 Javascript
ES6知识点整理之对象解构赋值应用示例
Apr 17 Javascript
Vue安装浏览器开发工具的步骤详解
May 12 Javascript
微信小程序实现圆形进度条动画
Nov 18 Javascript
layui将table转化表单显示的方法(即table.render转为表单展示)
Sep 24 Javascript
Vue中inheritAttrs的使用实例详解
Dec 31 Vue.js
js基于canvas实现时钟组件
Feb 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
谈PHP生成静态页面分析 模板+缓存+写文件
2009/08/17 PHP
Prototype Object对象 学习
2009/07/12 Javascript
深入理解JavaScript系列(6) 强大的原型和原型链
2012/01/15 Javascript
JavaScript实现按Ctrl键打开新页面
2014/09/04 Javascript
详解JavaScript中的Unescape()和String() 函数
2015/11/09 Javascript
浅谈jQuery hover(over, out)事件函数
2016/12/03 Javascript
基于jQuery实现一个marquee无缝滚动的插件
2017/03/09 Javascript
原生javascript上传图片带进度条【实例分享】
2017/04/06 Javascript
JavaScript仿微信(电话)联系人列表滑动字母索引实例讲解(推荐)
2017/08/16 Javascript
Angular实现可删除并计算总金额的购物车功能示例
2017/12/26 Javascript
iView-admin 动态路由问题的解决方法
2018/10/03 Javascript
在Layui中实现开关按钮的效果实例
2019/09/29 Javascript
Nodejs实现WebSocket代码实例
2020/05/19 NodeJs
Python实现的简单万年历例子分享
2014/04/25 Python
Python 的 Socket 编程
2015/03/24 Python
python实现list由于numpy array的转换
2018/04/04 Python
python读取一个目录下所有txt里面的内容方法
2018/06/23 Python
python对html过滤处理的方法
2018/10/21 Python
解决pandas.DataFrame.fillna 填充Nan失败的问题
2018/11/06 Python
windows上安装python3教程以及环境变量配置详解
2019/07/18 Python
利用Python实现手机短信监控通知的方法
2019/07/22 Python
Win10环境python3.7安装dlib模块趟过的坑
2019/08/01 Python
python实现对图片进行旋转,放缩,裁剪的功能
2019/08/07 Python
将python2.7添加进64位系统的注册表方式
2019/11/20 Python
Python找出列表中出现次数最多的元素三种方式
2020/02/24 Python
python GUI模拟实现计算器
2020/06/22 Python
Selenium python时间控件输入问题解决方案
2020/07/22 Python
Lookfantastic俄罗斯:欧洲在线化妆品零售商
2019/08/06 全球购物
HSRP的含义以及如何工作
2014/09/10 面试题
上海期货面试题
2014/01/31 面试题
linux面试题参考答案(3)
2012/09/13 面试题
美德好少年主要事迹
2014/01/29 职场文书
车辆年检委托书范本
2014/10/14 职场文书
护士个人年终总结
2015/02/13 职场文书
2015年社区流动人口工作总结
2015/05/12 职场文书
Html5生成验证码的示例代码
2021/05/10 Javascript