在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 相关文章推荐
Display SQL Server Version Information
Jun 21 Javascript
工作中常用到的JS表单验证代码(包括例子)
Nov 11 Javascript
纯Javascript实现Windows 8 Metro风格实现
Oct 15 Javascript
js获取电脑分辨率的思路及操作
Nov 22 Javascript
Jquery uploadify图片上传插件无法上传的解决方法
Dec 16 Javascript
一段非常简单的js判断浏览器的内核
Aug 17 Javascript
利用JavaScript阻止表单提交的两种方法
Aug 11 Javascript
js正则表达式惰性匹配和贪婪匹配用法分析
Dec 26 Javascript
BootStrap Datetimepicker 汉化的实现代码
Feb 10 Javascript
详解http访问解析流程原理
Oct 18 Javascript
前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来
Nov 14 jQuery
一个小时快速搭建微信小程序的方法步骤
Apr 15 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
PHP6 mysql连接方式说明
2009/02/09 PHP
php购物车实现代码
2011/10/10 PHP
PHP使用trim函数去除字符串左右空格及特殊字符实例
2016/01/07 PHP
Yii2框架数据验证操作实例详解
2018/05/02 PHP
thinkphp5.1 文件引入路径问题及注意事项
2018/06/13 PHP
JS类的封装及实现代码
2009/12/02 Javascript
Javascript学习笔记1 数据类型
2010/01/11 Javascript
在浏览器窗口上添加遮罩层的方法
2012/11/12 Javascript
js克隆对象、数组的常用方法介绍
2013/09/26 Javascript
jquery ajax实现下拉框三级无刷新联动,且保存保持选中值状态
2013/10/29 Javascript
jQuery写fadeTo示例代码
2014/02/21 Javascript
js拼接html注意问题示例探讨
2014/07/14 Javascript
JQuery获取鼠标进入和离开容器的方向
2016/12/29 Javascript
angular或者js怎么确定选中ul中的哪几个li
2017/08/16 Javascript
layer实现关闭弹出层刷新父界面功能详解
2017/11/15 Javascript
vue中rem的配置的方法示例
2018/08/30 Javascript
iSlider手机端图片滑动切换插件使用详解
2019/12/24 Javascript
vue路由切换时取消之前的所有请求操作
2020/09/01 Javascript
[08:44]DOTA2发布会群星聚首 我们都是刀塔人
2014/03/21 DOTA
[01:18]一目了然!DOTA2DotA快捷操作对比第一弹
2014/07/01 DOTA
python按综合、销量排序抓取100页的淘宝商品列表信息
2018/02/24 Python
python sort、sort_index方法代码实例
2019/03/28 Python
PyTorch的SoftMax交叉熵损失和梯度用法
2020/01/15 Python
python爬虫学习笔记之pyquery模块基本用法详解
2020/04/09 Python
提高python代码运行效率的一些建议
2020/09/29 Python
python爬虫 requests-html的使用
2020/11/30 Python
pytorch中index_select()的用法详解
2021/01/06 Python
英国殿堂级有机护肤品牌:Rodial
2017/04/17 全球购物
数学专业推荐信范文
2013/11/21 职场文书
大学学风建设方案
2014/05/04 职场文书
广告公司文案策划岗位职责
2015/04/14 职场文书
导师鉴定意见
2015/06/05 职场文书
2015年社区反邪教工作总结
2015/10/14 职场文书
商业计划书如何写?关键问题有哪些?
2019/07/11 职场文书
Jupyter notebook 输出部分显示不全的解决方案
2021/04/24 Python
浅谈css清除浮动(clearfix和clear)的用法
2023/05/21 HTML / CSS