iView表格优势
Vue组件或UI里表格工具很多，主要分为2种
- 一种只是将表格工具美化，表格视觉上也很清楚，如Elemnet的表格
- 另一种是将数据传入，表格格式化完全靠参数。
iView表格属于后者,iView表格里列描述数据对象有一个render和renderHeader,分别是单元格渲染和表头渲染。
- iView表格里的render和Vue里的渲染函数很相似。
-- 文档里的说明是
自定义渲染列，使用 Vue 的 Render 函数。传入两个参数，第一个是 h，第二个为对象，包含 row、column 和 index，分别指当前行数据，当前列数据，当前行索引
使用方法是
render:(h,params)=>{
return h('span',params.row.title);
}
其中 column内容就是你自已定议的title 、width 、key 和其它值，一般用的较少，row就是当前行的数据。
这里主要是h函数，官方的示例里只有最常用的东西，相关学习视频要钱。我找了找VUE里面渲染函数，比较全面。
关于VUE rander 函数的 createElement参数，这个createElement相当于iView里面的h,都是函数。
createElement函数里面三个参数分别是 标签(也可能是模版，我是这么理解)，模板相关属性的数据对象、内容（也是子节点）。
官方示例
// @returns {VNode}
createElement(
// {String | Object | Function}
// 一个 HTML 标签字符串，组件选项对象，或者
// 解析上述任何一种的一个 async 异步函数，必要参数。
'div',
// {Object}
// 一个包含模板相关属性的数据对象
// 这样，您可以在 template 中使用这些属性。可选参数。
{
// (详情见下一节)
},
// {String | Array}
// 子节点 (VNodes)，由 `createElement()` 构建而成，
// 或使用字符串来生成“文本节点”。可选参数。
[
'先写一些文字',
createElement('h1', '一则头条'),
createElement(MyComponent, {
props: {
someProp: 'foobar'
}
})
]
)
下面是模板相关属性的数据对象具体参数设置
使用中的经验
- 图片和超连接的src 和 herf等属性放在 attrs里面。
{
// 和`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
},
// 自定义指令。注意，你无法对 `binding` 中的 `oldValue`
// 赋值，因为 Vue 已经自动为你进行了同步。
directives: [
{
name: 'my-custom-directive',
value: '2',
expression: '1 + 1',
arg: 'foo',
modifiers: {
bar: true
}
}
],
// 作用域插槽格式
// { name: props => VNode | Array<VNode> }
scopedSlots: {
default: props => createElement('span', props.text)
},
// 如果组件是其他组件的子组件，需为插槽指定名称
slot: 'name-of-slot',
// 其他特殊顶层属性
key: 'myKey',
ref: 'myRef'
}
对于自定义组件中要用v-model
props: ['value'],
render: function (createElement) {
var self = this
return createElement('input', {
domProps: {
value: self.value
},
on: {
input: function (event) {
self.$emit('input', event.target.value)
}
}
})
}
