No more than code.
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'
}