render用法汇总（转载）

vue render  https://cn.vuejs.org/v2/guide/render-function.html

iview render  视频教程  https://ke.sifou.com/course/1650000011074057/section/1500000008892728

应用案例一

https://blog.csdn.net/weixin_33953384/article/details/91375029?utm_medium=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromBaidu-1.control&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromBaidu-1.control

使用：

<Table border ref="selection" :columns="columns" :data="listData" :loading="false"></Table>
复制代码
设置：

columns: [
    {
      type: 'selection',
      width: 60,
      align: 'center'
    },
    {
      title: '排序值',
      key: 'sortOrder',
      align: 'center'
    },
    {
      title: '品牌链接',
      key: 'siteUrl',
      align: 'center',
      render: (h, params) => {
        return h('a', {
          attrs: {
            href: params.row.siteUrl,
          },
          class:{
            siteUrl: true,
          }
        }, params.row.siteUrl);
      }
    },
    {
      title: '操作',
      align: 'center',
      render: (h, params) => {
        let row = params.row;
        return h('div', [
          h('Button', {
            props: {
              type: 'ghost',
              size: 'small'
            },
            style: {
              marginRight: '5px'
            },
            on: {
              click: () => {
                this.toCheckDetails(row.id);
              }
            }
          }, '查看'),
          h('Button', {
            props: {
              type: 'ghost',
              size: 'small'
            },
            style: {
              marginRight: '5px'
            },
            on: {
              click: () => {
                this.toEdit(row.id);
              }
            }
          }, '编辑')
        ]);
      }
    }
  ]
复制代码
属性大全：

render: (h, params) {//params是一个对象，包含 row、column 和index，分别指当前行数据，当前列数据，当前行索引
  return h('div', {
    props: { // Component props
      msg: 'hi',
    },
    
    attrs: { // normal HTML attributes
      id: 'foo'
    },
    
    domProps: { // DOM props
      innerHTML: 'bar'
    },
    
    on: { // Event handlers
      click: this.clickHandler
    },
    // For components only. Allows you to listen to native events, rather than events emitted from the component using vm.$emit.
    nativeOn: {
      click: this.nativeClickHandler
    },
    
    class: { // class is a special module, same API as `v-bind:class`
      foo: true,
      bar: false
    },
    
    style: { // style is also same as `v-bind:style`
      color: 'red',
      fontSize: '14px'
    },
    // other special top-level properties
    key: 'key',
    ref: 'ref',
    // assign the `ref` is used on elements/components with v-for
    refInFor: true,
    slot: 'slot'
  })
}
复制代码
table组件input值的绑定和获取： 1、render函数中不能直接使用v-model； 2、解决办法：

render: (h, {row}) => {
    return h('Input', {
      props: {
        clearable: true,
        placeholder: '标签编号',
        value: row.tagCode,
      },
      on: {
        input: (val) => {
          row.tagCode = val;
        }
      }
    });
  }

　　

应用案例二

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:()=>{
	              }
              }
              }
              ,'文本啊啊啊'
     )         

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34

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

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48
• 49
• 50
• 51
• 52
• 53
• 54
• 55
• 56

效果图：

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 ? '正常' : '解约')
          }
        },

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18

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