iView表格组件Table的render用法(slot,class,style,props,attrs)

2021-06-18 2071点热度 0人点赞 0条评论

iView下表格(Table)组件里columns的render写法,对应普通HTML组件的写法整理如下:

return h('Tag', {
        slot: 'list',
        // class: 'my-class my-class2',
        class: {
            'show':true,
            'iscolor':true
        },
        props: {
            type: 'primary'
        },
        style: {
            marginRight: '10px'
        },
        attrs: {
            src: require("@/assets/xxx.png")
        }
        domProps: {
            innerHTML: 'xxx',
            href: '',
            target: '_blank'
        },
        on: {
            click: () => {
                console.log("clicked")
            },
            // DropDown的时候,用到了这个
            'on-click': (name) => {
                console.log("clicked", name)
            }

        }
    },
    'Text');
  • slot: 对应iView文档API里的slot
  • class:对应Html组件的class,多个class名字,用空格隔开,也可以使用object的方式,如:class: { 'show':true, 'divhighted': highted === true }
  • props:对应iView文档API的props
  • style:对应Html组件的style,注意里面的style要转成驼峰形式的,例如margin-right改成marginRight
  • attrs:对应Html里的attributes,例如<img src="xxx.png" />里的src
  • domProps:对应Html里的原始的dom,例如<a href="https://www.baidu.com" target="_blank">baidu</a> 里面的href,就可以写成domProps: { href: 'https://www.baidu.com', target: '_blank' }
  • on:绑定事件

admin

这个人很懒,什么都没留下

文章评论

您需要 登录 之后才可以评论