iview render函数常用总结（vue render函数）

今天药忘吃喽~ 2021-09-19 00:30 552阅读 0赞

**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])
              }

效果图：  
![在这里插入图片描述][20190418184916124.jpg]  
switch 异步时loading状态  
![在这里插入图片描述][20190418185359791.jpg]  
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 ? '正常' : '解约')
              }
            },

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzIwNjk0OQ_size_16_color_FFFFFF_t_70]

值得注意的是配置的参数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)
              }
     }

[20190418184916124.jpg]: /images/20210812/b338b9fcf1994eab8124cb6731adf2ac.png
[20190418185359791.jpg]: /images/20210812/868761baecf84c73ba94f67d0b81d487.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzIwNjk0OQ_size_16_color_FFFFFF_t_70]: /images/20210812/0b202558cff64fa2a797cb8f98cd89aa.png