[轉]iview render函數經常使用總結（vue render函數）

原文地址:https://blog.csdn.net/weixin_43206949/article/details/89385550

iview 的render函數就是vue的render函數
iview經常使用在表格裏面自定義內容

render函數經常使用的配置

h就是createdElement的簡寫
3個參數以下：

h("元素名稱或組件名稱", {
              domProps: { // 原生dom元素的一些屬性
                value: 1,
                type: 'number',
                min: 1，
                innerHTML：’‘
              },
              props:{ // 傳給組件數據 比喻iview  Button的type,size 等等
                type:'text',
                size:'small'
              }，
              class:{ // 類
                btn:true//
              }，
              attrs:{ // html屬性,class
                   id:'box'
                   class:'brn2'
              }，
              style:{ // 內聯樣式
              },
              slot:'slotName', // 組件的插槽
              on:{ // 事件 包括組件的自定義事件
                  click:()=>{
                  },
                  'on-change':()=>{
                  },
              }，
              nativeOn:{ // 相似vue的.native修飾符，自定義組件經常使用
                  click:()=>{
                  }
              }
              }
              ,'文本啊啊啊'
     )         

h的第二個參數支持數組的形式，數組裏面能夠是多個h渲染出來的元素對象或字符串

eg:
1，渲染多個組件

{
          title: '操做',
          width: 150,
          render: (h, { row, index }) => {
            let btn = h('i-switch', {
              props: {
                value: row.join_status === 1 ? true : false,
                size: 'large',
                loading: row.loading
              },
              on: {
                'on-change': (val) => {
                  this.tabData[index].loading = true
                  if (!val) {
                    this.$Modal.confirm({
                      title: '你肯定要禁用該加盟商嗎？',
                      content: '<p>禁用將會致使該加盟商下全部人員沒法登錄CRM系統</p>',
                      onOk: () => {
                        this.changeChannelStatus(row.id)
                      },
                      onCancel: () => {
                        this.tabData[index].loading = false
                      }
                    });
                    return
                  }
                  this.changeChannelStatus(row.id)
                }
              }
            }, [
                h('span', {
                  slot: 'open',
                  domProps: {
                    innerHTML: 'ON'
                  }
                }),
                h('span', {
                  slot: 'close',
                  domProps: {
                    innerHTML: 'OFF'
                  }
                })
              ]
            )
            let edit = h('a', {
              style: {
                'margin-right': '15px',
              },
              on: {
                click: () => {
                  this.$router.push({ name: 'addJoiner', query: { ...row, tit: '編輯加盟商' } })
                }
              }
            }, '編輯')
            return h('div', [edit, btn])
          }

效果圖：

switch 異步時loading狀態

2，渲染自定義組件

  {
          title: '狀態',
          render: (h, { row }) => {
            return h(myTag, {
              props: {
                color: row.join_status === 1 ? '#52C41A' : 'red'
              },
              class: {
                'hahah': true
              },
              nativeOn: { //事件
                click: () => {
                  alert(1)
                }
              }
            }, row.join_status === 1 ? '正常' : '解約')
          }
        },



值得注意的是配置的參數vlaue支持變量。

怎麼綁定v-model?

這個問題vue官方說了：是無法綁定的，只能本身實現

實現也不難

eg:

 {
          title: '價格',
          key: 'name',
          render: (h, { row, index }) => {
            let input = h('input', {
              domProps: {
                value: row.price,
                type: 'number',
                min: 1
              },
              style: {
                width: '200px',
                display: 'inline-block',
                height: '32px',
                'line-height': 1.5,
              },
              on: {
                change: (event) => { // 實現綁定數據
                  let val = event.target.value
                  this.tabData[index].price = val
                }
              }
            })
            let arr = [input]
            let tip = h('span', {
              style: {
                color: 'red',
                marginLeft: '10px'
              }
            }, '必填，最多保留兩位小數')
            if (row.tip) {
              arr.push(tip)
            }
            return h('div', arr)
          }
 }