vue或者ui组件table中render函数配置，超简单一目了然

最新推荐文章于 2024-04-03 14:50:38 发布

前端架构师陈龙威

最新推荐文章于 2024-04-03 14:50:38 发布

阅读量1.5k

点赞数

分类专栏：前端文章标签： vue table render

本文链接：https://blog.csdn.net/qq_39974331/article/details/121438098

版权

前端专栏收录该内容

5 篇文章 1 订阅

订阅专栏

前端-vue-render函数的渲染

总结：

// render配置
render: (h, param) => {
    return h('h-button', {
        // 与 `v-bind:class` 的 API 相同，
        // 接受一个字符串、对象或字符串和对象组成的数组
        class: {
            hiddenDom: true,
            showDom: false
        },
        // 与 `v-bind:style` 的 API 相同，
        // 接受一个字符串、对象，或对象组成的数组
        style: {
            color: 'red',
            fontSize: '14px',
            'background-color': 'red'
        },
        // 普通的 HTML attribute
        attrs: {
            id: 'clw1',
            name: 'clw'
        },
        // 组件的prop, 可以用于向要渲染的组件中绑定属性值或者传参
        props: {
            bindParam: param,
        },
        // DOM property，比如document.querySelector('.xx').innerHTML = ''
        domProps: {
            innerHTML: ''
        },
        // 事件监听器在 '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',
         // 其它特殊顶层 property
         key: 'myKey',
         ref: 'myRef',
         // 如果你在渲染函数中给多个元素都应用了相同的 ref 名，
         // 那么 `$refs.myRef` 会变成一个数组。
         refInFor: true
    })
}
复制代码

情景：

在日常开发中，我们如果要进行table组件的自定义，很多ui框架会提供一个render函数让我们进行高度自定义，但是render函数里面的配置项都有哪些呢，为什么框架里都不提供这个详细呢？至少我用过的hui，element等几乎都没有提过，也可能我没搜到。其实render配置在vue里面就已经提到了，是我看文档不仔细。