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

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

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

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