首页 > 技术文章 > iview renderHeader()

wn798 2019-12-30 15:41 原文

iview renderHeader()

// Tooltip提示
{
    title: '一级', // 9th
    align: 'center',
    children: [
        {
            title: '二级',
            key: 'erji',
            align: 'center',
            width: 100,
            renderHeader: (h, params) => {
                return h('div', [
                    h('Tooltip', {
                        props: {
                            content: '二级浮动提示内容',
                            placement: 'top',
                            transfer: true,
                            maxWidth: '220',
                            theme: 'light'
                        },
                        class: 'm-tooltip-overflow'
                    }, [
                        h('Icon', {
                            props: {
                                type: 'ios-information-empty',
                                color: '#495060',
                                size: 'medium'
                            },
                            style: {
                                marginRight: '2px'
                            }
                        }),
                        h('span', '字段名称')
                    ])
                ]);
                // return h('Tooltip', {
                //     props: {
                //         content: '提示内容',
                //         placement: 'top',
                //         transfer: true,
                //         maxWidth: '220',
                //         theme: 'light'
                //     },
                //     class: 'm-tooltip-overflow'
                // }, '字段名称');
            }
        },
        {
            title: '二级',
            key: 'erji',
            align: 'center',
            width: 100
        },
        {
            title: '二级',
            key: 'erji',
            align: 'center',
            width: 100
        },
        {
            title: '二级',
            key: 'erji',
            align: 'center',
            width: 80
        },
        {
            title: '二级',
            key: 'erji',
            align: 'center',
            width: 100
        }
    ]
},

换行mak

style: {
    slot: 'content',
    whiteSpace: 'normal'
}

return h('div', [
    h('Tooltip', 
      {
        props: {
            // content: content,
            placement: 'bottom',
            transfer: true,
            maxWidth: '220',
            theme: 'light'
        },
        class: 'm-tooltip-overflow'
    },
      [
        h('span', {
            style: {
                slot: 'content',
                whiteSpace: 'normal'
            }
        }, '标题'),
        h('Icon', {
            props: {
                type: 'ios-information-outline',
                color: '#FFFFFF',
                size: '14'
            },
            style: {
                marginLeft: '1px',
                marginRight: '1px'
            }
        }),
        h('span', {
            slot: 'content',
            style: {
                whiteSpace: 'normal'
            }
        }, '提示内容1'),
        h('div', {
            slot: 'content',
            style: {
                whiteSpace: 'normal'
            }
        }, '提示内容2'),
    ]
     )
]);

checkbox mak

                    renderHeader: (h, params) => {
                        return h("div",
                            {
                                class: "testClass",
                                on: {
                                    click: () => {
                                        // do something
                                    },
                                },
                            },
                            [
                                h("input", {
                                    class: "iptClass",
                                    domProps: {
                                        title: "点击全选",
                                        type: "checkbox",
                                        checked: true,
                                        id: "iptId",
                                    },
                                }),
                                h("span", {
                                    class: "testClass",
                                }),
                            ]
                        );
                    },

end.

推荐阅读