在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 相关文章推荐
使用IE6看老赵的博客 jQuery初探
Jan 17 Javascript
JS过滤url参数特殊字符的实现方法
Dec 24 Javascript
jquery获取img的src值的简单实例
May 17 Javascript
JavaScript lodash常见用法系列小结
Aug 24 Javascript
jquery radio的取值_radio的选中_radio的重置方法
Sep 20 Javascript
angular.extend方法的具体使用
Sep 14 Javascript
vuejs使用axios异步访问时用get和post的实例讲解
Aug 09 Javascript
解决vue js IOS H5focus无法自动弹出键盘的问题
Aug 30 Javascript
详解VScode编辑器vue环境搭建所遇问题解决方案
Apr 26 Javascript
JavaScript原型继承和原型链原理详解
Feb 04 Javascript
vue打开新窗口并实现传参的图文实例
Mar 04 Vue.js
利用 JavaScript 构建命令行应用
Nov 17 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 前一天或后一天的日期
2008/06/28 PHP
PHP sprintf()函数用例解析
2011/05/18 PHP
分享一个PHP数据流应用的简单例子
2012/06/01 PHP
PHP将两个关联数组合并函数提高函数效率
2014/03/18 PHP
phpcms的分类名称和类别名称的调用
2017/01/05 PHP
PHP7生产环境队列Beanstalkd用法详解
2020/05/19 PHP
基于jquery的使ListNav兼容中文首字拼音排序的实现代码
2011/07/10 Javascript
javascript教程之不完整的继承(js原型链)
2014/01/13 Javascript
Bootstrap嵌入jqGrid,使你的table牛逼起来
2016/05/05 Javascript
jquery.cookie.js的介绍与使用方法
2017/02/09 Javascript
浅谈JS验证表单文本域输入空格的问题
2017/02/14 Javascript
jQuery实现文章图片弹出放大效果
2017/04/06 jQuery
JS实现提交表单前的数字及邮箱校检功能
2017/11/13 Javascript
使用Vue-Router 2实现路由功能实例详解
2017/11/14 Javascript
javscript 数组扁平化的实现
2020/02/03 Javascript
VUE table表格动态添加一列数据,新增的这些数据不可以编辑(v-model绑定的数据不能实时更新)
2020/04/03 Javascript
原生JS实现多条件筛选
2020/08/19 Javascript
详解Python中的array数组模块相关使用
2016/07/05 Python
Python通过调用mysql存储过程实现更新数据功能示例
2018/04/03 Python
django2用iframe标签完成网页内嵌播放b站视频功能
2018/06/20 Python
selenium+python自动化测试之使用webdriver操作浏览器的方法
2019/01/23 Python
Python 微信之获取好友昵称并制作wordcloud的实例
2019/02/21 Python
numpy concatenate数组拼接方法示例介绍
2019/05/27 Python
Python实现基于SVM的分类器的方法
2019/07/19 Python
Selenium基于PIL实现拼接滚动截图
2020/04/10 Python
tensorflow之读取jpg图像长和宽实例
2020/06/18 Python
canvas实现有递增动画的环形进度条的实现方法
2019/07/10 HTML / CSS
美国受欢迎的女性牛仔裤品牌:DL1961
2016/11/12 全球购物
iHerb香港:维生素、补充剂和天然保健品
2017/08/01 全球购物
Chupi官网:在爱尔兰手工制作的订婚、结婚戒指和精美珠宝
2020/09/28 全球购物
施工资料员岗位职责
2014/01/06 职场文书
最美家庭活动方案
2014/08/31 职场文书
党员干部三严三实心得体会
2014/10/13 职场文书
四风问题党员个人整改措施
2014/10/27 职场文书
关于SpringBoot 使用 Redis 分布式锁解决并发问题
2021/11/17 Redis
pandas进行数据输入和输出的方法详解
2022/03/23 Python