iview table render 用法

| 用法

render:(h,params) => {
  return h(" 定义的元素 "{ 元素的性质 }" 元素的内容"/[元素的内容])
}
  • 当定义的元素没有子元素时:
render:(h,params)=>{
    return h('div', {
      style:{
        width:'100px',height:'100px',background:'#ccc'
      }
    }, '地方')
}
  • 当定义的元素中要嵌套其他元素时:
render:(h,params)=>{
     return h('div',{
       style:{
         width:'100px',height:'100px',background:'#ccc'
       }
      },
      [
        h('p','内容2')
      ],'内容1')
}
  • 嵌套 3 层元素
render:(h, params) => {
  return h('div',[
            h('div',{
              style:{
                float:'left',width:'50px',
                height:'50px',background:'#ccc'
              }
            },
            [
                h('p','内容2')
            ]),
            h('div',{
              style:{
                float:'left',width:'50px',
                height:'50px',background:'#fc1'
              }
            },
            [
              h('p','内容2')
            ])
          ])
}

| 配置

{
  // 和`v-bind:class`一样的 API
  'class': {
    foo: true,
    bar: false
  },
  // 和`v-bind:style`一样的 API
  style: {
    color: 'red',
    fontSize: '14px'
  },
  // 正常的 HTML 特性
  attrs: {
    id: 'foo'
  },
  // 组件 props
  props: {
    myProp: 'bar'
  },
  // DOM 属性
  domProps: {
    innerHTML: 'baz'
  },
  // 事件监听器基于 "on"
  // 所以不再支持如 v-on:keyup.enter 修饰器
  // 需要手动匹配 keyCode。
  on: {
    click: this.clickHandler
  },
  // 仅对于组件,用于监听原生事件,而不是组件使用 vm.$emit 触发的事件。
  nativeOn: {
    click: this.nativeClickHandler
  },
  // 自定义指令. 注意事项:不能对绑定的旧值设值
  // Vue 会为您持续追踨
  directives: [
    {
      name: 'my-custom-directive',
      value: '2'
      expression: '1 + 1',
      arg: 'foo',
      modifiers: {
        bar: true
      }
    }
  ],
  // Scoped slots in the form of
  // { name: props => VNode | Array<VNode> }
  scopedSlots: {
    default: props => h('span', props.text)
  },
  // 如果子组件有定义 slot 的名称
  slot: 'name-of-slot'
  // 其他特殊顶层属性
  key: 'myKey',
  ref: 'myRef'
}