基於VueJS的render渲染函數結合自定義組件打造一款很是強大的IView 的Table

轉載：https://segmentfault.com/a/1190000015970367?utm_source=tag-newest

記錄一下 在IView中使用 Rander渲染列時如何調用本身的自定義指令.

 1 h('組件名', {組件屬性(包括vue相關的props)}, [子組件或者子節點或者文本])
 2 {
 3   // 和`v-bind:class`同樣的 API
 4   'class': {
 5     foo: true,
 6     bar: false
 7   },
 8   // 和`v-bind:style`同樣的 API
 9   style: {
10     color: 'red',
11     fontSize: '14px'
12   },
13   // 正常的 HTML 特性
14   attrs: {
15     id: 'foo'
16   },
17   // 組件 props
18   props: {
19     myProp: 'bar'
20   },
21   // DOM 屬性
22   domProps: {
23     innerHTML: 'baz'
24   },
25   // 事件監聽器基於 `on`
26   // 因此再也不支持如 `v-on:keyup.enter` 修飾器
27   // 須要手動匹配 keyCode。
28   on: {
29     click: this.clickHandler
30   },
31   // 僅對於組件，用於監聽原生事件，而不是組件內部使用 `vm.$emit` 觸發的事件。
32   nativeOn: {
33     click: this.nativeClickHandler
34   },
35   // 自定義指令。注意事項：不能對綁定的舊值設值
36   // Vue 會爲您持續追蹤
37   directives: [
38     {
39       name: 'my-custom-directive',
40       value: '2',
41       expression: '1 + 1',
42       arg: 'foo',
43       modifiers: {
44         bar: true
45       }
46     }
47   ],
48   // Scoped slots in the form of
49   // { name: props => VNode | Array<VNode> }
50   scopedSlots: {
51     default: props => createElement('span', props.text)
52   },
53   // 若是組件是其餘組件的子組件，需爲插槽指定名稱
54   slot: 'name-of-slot',
55   // 其餘特殊頂層屬性
56   key: 'myKey',
57   ref: 'myRef'
58 }