Vue rander

2019独角兽企业重金招聘Python工程师标准>>>

具体rander使用方法可以参照官方文档

创建img元素：

//创建多个img元素
render: (h, params) => {
            return h('div', [
              h('img',{
                domProps: {
                  width:'40',
                  height:'40',
                  src:''
                }
              })
            ]);
          }

//创建单个
render: (h, params) => {
            return  h('img',{
                domProps: {
                  width:'40',
                  height:'40',
                  src:''
                }
              });
          }

创建button元素

//iview框架中的table组件params展示元素
render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'success',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.show(params.index)
                  }
                }
              }, '查看'),
              h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.show(params.index)
                  }
                }
              }, '编辑'),
              h('Button', {
                props: {
                  type: 'error',
                  size: 'small'
                },
                on: {
                  click: () => {
                    this.remove(params.index)
                  }
                }
              }, '删除')
            ]);

引用iview框架中的Icon元素

 render: (h, params) => {
           return h('Icon', {
                      props:{
                             type: 'person'
                        }
                     });
      })

 

 

转载于:https://my.oschina.net/u/2251646/blog/1536742