vue渲染函数 & JSX

1. 渲染 input

render : (h, {row}) => {
  return  (
     // event是事件对象
      <input value={row.num}  onBlur={() => this.changeNum(row,event)} />
  )
}

2. v-for

render: (h, {row}) => {
  return (
       row.icon.map(item => {
            return <img src={item} onClick={() =>  this.lookImage(item)} />
       }
   )
}

3. v-if 条件, 多个需要用【<div></div>】包裹起来

{
    title: '图片/视频',
    align: "center",
    key: "imgUrl",
    render:(h, {row}) => {
       return (
           <div>
              {row.position === "7" && <video src={row.link} controls="controls" style="height: 100px;margin-top: 5px;"></video>}
              {row.position !== "7" && <img src={row.link} style="height: 100px;margin-top: 5px;" />}
           </div>
         )
     },
},

4. iview中的poptip组件添加事件

render: (h, {row}) => {
   return (
     <div>
           {row.status === 2 && <icon type="md-archive" size='26' color= '#333' title="导出订单" class='handle' onClick={() => this.exportOrder(row)}/>}
            <icon type="ios-create" size='28' color= '#218da0' title="编辑"  class= 'look' onClick={() => this.getGoosDetail(row)}/>
           <poptip confirm title="要删除订单吗 ?" on-on-ok={() => this.deleteSeries(row)}  >
             <icon type="ios-trash" size='28' color= '#333' title="删除" class='delete'/>
          </poptip>
      </div>
  )
}

5. input 数值

 {
     title: "奖励积分",
     align: "center",
     key: "incentiveIntegral",
     render: (h, params) => {
         return h('Input',{
              props: {
                  size: 'small',
                  type: 'number',
                  value: params.row.incentiveIntegral,
              },
              on: {
                 'on-change': (e) => {
                      params.row.incentiveIntegral = e.target.value
                      this.dailyData[params.index] = params.row
                      },
                'on-blur': () => {
                    // 用这个方法可以获取当前修改数字后的值 
                     this.updateNum(params)
               }
            }
         })
    }  
},

Tooltip

{
  title: "地区",
  align: "center",
  key: "areaname",
  render: (h, { row }) => {
     let texts = row.areaname;
     if (row.areaname !== null) {
       if (row.areaname.length > 12) {
            texts = row.areaname.slice(0, 12) + "...";
        } else {
            texts = row.areaname;
        }
     }
     return h("div", [
        h("Tooltip",{
              props: {
                    placement: "top",
                    transfer: true
             }
         },[texts,h("span",{
                slot: "content",
                style: {
                     whiteSpace: "normal"
                }
         },row.areaname)])
       ]);
     }
},