vue2中jsx语法糖使用elmentui el-tooltip组件

最新推荐文章于 2024-11-27 13:56:46 发布

原创最新推荐文章于 2024-11-27 13:56:46 发布 · 1.5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #开发语言

前端专栏收录该内容

136 篇文章

订阅专栏

本文介绍了Vue中`render`函数的使用，特别是`createElement`函数在创建组件时的角色。通过示例展示了如何传递props、data和子节点来渲染自定义组件，如`el-tooltip`，并讨论了组件属性设置和内容注入的方法。

h：函数的作用createElement

接收三个参数

param1可以是 String | Object | Function
第二个是数据对象。我们在这里主要包括：props, attrs, dom props, class 和 style....
param3代表子节点，可以是 String | Array

render(h){return h(组件名称,{
//组件的属性和数据如el-image的src属性
    props:{
        src:'url'
    }
},子组件数组)}

renderHeaderCell:function({row,column,rowIndex},h){
            const span = h('span', 'Ⅰ级（%）')
            return h('el-tooltip', {
                //如果要使用其他组件，将el-tooltip替换其他组件 列如：Esign  props:{imgid:params.row.imgId}//imgid是自定义的值
                props: {
                  placement:"top",
                  content: '等级Ⅰ：指标：≤风险筛选值。污染评价：污染风险低；',
                  zIndex: 9999,
                },
              },[span])
            
          }