Vue rander

具體rander使用方法能夠參照官方文檔javascript

建立img元素:html

//建立多個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元素vue

//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元素java

render: (h, params) => {
           return h('Icon', {
                      props:{
                             type: 'person'
                        }
                     });
      })
相關文章
相關標籤/搜索