在此之前由于习惯了vue template的写法，使用render函数进行标签定义有些不大习惯，因此记录于此，以便日后参考。

在项目中使用render函数最多的是iview的Table组件，所以以此为例

自定义表内容

• 用render函数自定义表内容

语法：

   render: (h, params) => {
      return h(' 定义的元素 ', { 元素的性质 }, ' 元素的内容' / [元素的内容]);
   }

以官方文档例子为例

render: (h, params) => {
  return h('div', [
    h('Button', {
      props: {
        type: 'primary',
        size: 'small'
      },
      style: {
        marginRight: '5px'
      },
      on: {
        click: () => {
          this.show(params.index)
        }
      }
    }, 'View')]);

定义属性 除了props还可以使用attrs(感觉attrs比较好用，props有时候不生效)

h('Button', {
      attrs: {
        type: 'primary',
        size: 'small'
      },

添加样式除了在行间添加还可以定义类名（习惯的写法），类名不在定义属性中添加而是和它们同级

h('Button', {
  class: 'className'
  attrs: {
    type: 'primary',
    size: 'small'
  },

上面列子中的Button是一个子元素，其父元素的属性为div，div的内容就是[ ]数组，所以想要给父元素添加属性或其他时，在标签名和内容之间定义

render: (h, params) => {
  return h('div', {
    class: 'className',
    props: {
      id: 'test'
    }
  }, [
    h('Button', {
      props: {
        type: 'primary',
        size: 'small'
      },

• 用slot插入表内容

在 columns 的某列添加slot属性

{
  title: 'Name',
  slot: 'name'
},

模板中插入

<template slot-scope="{ row }"
              slot="name">
      <strong>{{ row.name }}</strong>
</template>
// slot-scope 的参数有 3 个：当前行数据 row，当前列数据 column，当前行序号 index。

自定义表头

iview 的Table还可以自定义表头，方法基本和定义表内容差不多，只不过函数名不太一样，定义表头使用的是renderHeader函数

          // 自定义表头
          renderHeader: (h, params) => {
            return h('div', { class: 'container',
              on: {
                click: () => {
                  this.allSelected();
                }
              } }, [
              h('input', {
                class: 'inp',
                domProps: {
                  title: '点击全选',
                  type: 'checkbox',
                  checked: this.allSleStatus,
                  id: 'inp'
                }
              }),
              h('span', {
                class: 'checkmark'
              })
            ]);
          }