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

2021-06-18 2338点热度 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');
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');
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

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

文章评论

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