首先对Render进行分析,在iview官方的文档中,找到了table插入Button的例子:
- {
- title: 'Action',
- key: 'action',
- width: 150,
- align: 'center',
- render: (h, params) => {
- return h('div', [
- h('Button', {
- props: {
- type: 'primary',
- size: 'small'
- },
- style: {
- marginRight: '5px'
- },
- on: {
- click: () => {
- this.show(params.index)
- }
- }
- }, 'View'),
- h('Button', {
- props: {
- type: 'error',
- size: 'small'
- },
- on: {
- click: () => {
- this.remove(params.index)
- }
- }
- }, 'Delete')
- ]);
- }
这是Table的表头定义中的一段,意思是创建两个按钮,一个名为View,一个名为Delete,在疑惑h是什么的时候,看到网上一哥们的回答顿时茅厕顿开,问题地址,render参数中h可以看做是 createElement。可以看出上面的例子大概表现为一个div中包含两个Button,又根据生成Button的结构可以把这段代码简化一下,写为:
- render: (h, params) => {
- return h('Button', {
- props: {
- type: 'primary',
- size: 'small'
- },
- style: {
- marginRight: '5px'
- },
- on: {
- click: () => {
- this.show(params.index)
- }
- }
- }, 'View'),
- );
- }
在学vue的时候,有看到父组件和子组件之间的交互使用了props,我们在iview的文档中,看到Button的API包括type、size,由此可知,props可以直接声明子组件的API值内容,on中写的自然就是它的触发事件了。
好,现在开始写Table组件中的Select组件:
- render: (h, params) => {
- return h('Select', {
- props:{
- value: this.data[params.index].volumeType,
- },
- on: {
- 'on-change':(event) => {
- this.data[params.index].volumeType = event;
- }
- },
- },
- [
- h('Option',{
- props: {
- value: '1'
- }
- },'option1'),
- h('Option',{
- props: {
- value: '2'
- }
- },'option2')
- ]
- );
- },
可以看到效果:
好,现在我们实现了基本的渲染。现在我们实现动态改变option的内容,与组件的data结合起来,毕竟当数据量大的时候,总不能一个一个的写上去。
观察render的第三个参数为一个对象数组,我们可不可以使用便利数据数组的方式生成呢?(废话)
直接上代码,在数组的地方写入:
- this.volumeTypes.map(function(type){
- return h('Option', {
- props: {value: type}
- }, type);
- })
其中,this.volumeTypes就是我们的列数据,当然,这是最基本的绑定的写法,如果想使用对象数组,自行研究,很easy的~
这是我们的最终结果:
- {
- title: '卷类型',
- key: 'volumeType',
- align: 'center',
- render: (h, params) => {
- return h('Select', {
- props:{
- value: this.data[params.index].volumeType,
- },
- on: {
- 'on-change':(value) => {
- this.data[params.index].volumeType = value;
- }
- },
- },
- this.volumeTypes.map(function(type){
- return h('Option', {
- props: {value: type}
- }, type);
- })
- );
- },
- },
end。