在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 相关文章推荐
DWZ刷新dialog解决方法
Mar 03 Javascript
json中换行符的处理方法示例介绍
Jun 10 Javascript
JavaScript中document.forms[0]与getElementByName区别
Jan 21 Javascript
JS实现设置ff与ie元素绝对位置的方法
Mar 08 Javascript
AngularJS基础 ng-value 指令简单示例
Aug 03 Javascript
Vue组件中prop属性使用说明实例代码详解
May 31 Javascript
了解javascript中变量及函数的提升
May 27 Javascript
20道JS原理题助你面试一臂之力(必看)
Jul 22 Javascript
js实现聊天对话框
Feb 08 Javascript
React倒计时功能实现代码——解耦通用
Sep 18 Javascript
原生JavaScript实现刮刮乐
Sep 29 Javascript
解决elementui表格操作列自适应列宽
Dec 28 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实现的click captcha点击验证码类实例
2014/09/23 PHP
php对接java现实加签验签的实例
2016/11/25 PHP
使用git迁移Laravel项目至新开发环境的步骤详解
2020/04/06 PHP
Mootools 1.2教程 函数
2009/09/15 Javascript
详解javascript获取url信息的常见方法
2016/12/19 Javascript
微信小程序联网请求的轮播图
2017/07/07 Javascript
js和jQuery以及easyui实现对下拉框的指定赋值方法
2018/01/23 jQuery
详解js的视频和音频采集
2018/08/09 Javascript
JavaScript常见事件对象与操作实例总结
2019/01/05 Javascript
Vue项目中ESlint规范示例代码
2019/07/04 Javascript
Python爬取qq music中的音乐url及批量下载
2017/03/23 Python
pandas DataFrame 根据多列的值做判断,生成新的列值实例
2018/05/18 Python
matplotlib savefig 保存图片大小的实例
2018/05/24 Python
pygame实现雷电游戏雏形开发
2018/11/20 Python
python读取图片任意范围区域
2019/01/23 Python
python pycharm的安装及其使用
2019/10/11 Python
numpy.transpose()实现数组的转置例子
2019/12/02 Python
Python表达式的优先级详解
2020/02/18 Python
python实现拼接图片
2020/03/23 Python
Python基于DB-API操作MySQL数据库过程解析
2020/04/23 Python
浅谈keras通过model.fit_generator训练模型(节省内存)
2020/06/17 Python
python suds访问webservice服务实现
2020/06/26 Python
如何使用PyCharm引入需要使用的包的方法
2020/09/22 Python
彻底弄明白CSS3的Media Queries(跨平台设计)
2010/07/27 HTML / CSS
联想墨西哥官方网站:Lenovo墨西哥
2016/08/17 全球购物
New Balance英国官方网站:始于1906年,百年慢跑品牌
2016/12/07 全球购物
美国知名平价彩妆品牌:e.l.f. Cosmetics
2017/11/20 全球购物
Oasis服装官网:时尚女装在线
2020/07/09 全球购物
培训主管的岗位职责
2013/11/23 职场文书
学校个人对照检查材料
2014/08/26 职场文书
人事局接收函
2015/01/30 职场文书
病危通知书样本
2015/04/17 职场文书
Django使用redis配置缓存的方法
2021/06/01 Redis
CSS中妙用 drop-shadow 实现线条光影效果
2021/11/11 HTML / CSS
mysql数据库实现设置字段长度
2022/06/10 MySQL
MySQL串行化隔离级别(间隙锁实现)
2022/06/16 MySQL