iview 中 render 的使用方法

基本语法

三部分：分别定义span标签、（样式、属性、事件等综合内容）、显示内容

render:（h,params） => {
	return h('span', {
    class: "sub-title",
		style:{
      color: "#000"
    },
		on:{
			click: () => {
				console.log("params")
			}
		}
	},"点击")
}

精简例子

渲染 <span>hello</span>

render: (h,params) => {
  return h('span','hello')
}

显示多个内容

render: (h,params)=>{
  return h('div',[
    h('span',{style:"color:red;"},params.row.name),
    h('i-button',"删除")
  ])
}

render: (h,params)=>{
  return h('span',
  {
    		style: {
            display: 'inline-block',
            width: params.column._width*0.9+'px',
            overflow: 'hidden',
            textOverflow: 'ellipsis',
            whiteSpace: 'nowrap',
        }
  },
  "文本溢出用省略号显示"
}

显示组件

render: (h, params) => {
    return h('div', [
        h('Tooltip', {
                props: {
                    placement: 'top',
                }        
            }, [
                params.row.content, // 表格显示文字
                h('div', {
                        slot: 'content',
                        style: {
                            whiteSpace: 'normal'
                        }
                    }, params.row.content // 气泡内的文字
                )
            ])
]);

显示图片

render: (h, params) => {
  return h('div', [
    h('img', {
      domProps: {
        'src': params.row.img
      },
      style: {
        display: 'block',
        width: '30px',
        height: '30px',
        borderRadius: '3px',
        // margin: '0 auto'
      },
    })
  ])

注意：尽量不要在render和return之间做赋值操作，赋值操作及数据改变（i++）会触发iView的render的刷新机制，会不断刷新直到报错。

如果有点击事件，将这些操作都放在事件中进行处理。

版本号 1.0.0