在iview的Table中添加Select（render）

首先对Render进行分析，在iview官方的文档中，找到了table插入Button的例子：

[javascript] view plaincopy

{
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的结构可以把这段代码简化一下，写为：

[javascript] view plaincopy

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组件：

[javascript] view plaincopy

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的第三个参数为一个对象数组，我们可不可以使用便利数据数组的方式生成呢？（废话）

直接上代码，在数组的地方写入：

[javascript] view plaincopy

this.volumeTypes.map(function(type){
return h('Option', {
props: {value: type}
}, type);
})

其中，this.volumeTypes就是我们的列数据，当然，这是最基本的绑定的写法，如果想使用对象数组，自行研究，很easy的~

这是我们的最终结果：

[javascript] view plaincopy

{
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。

转载于:https://www.cnblogs.com/liubingboke/p/8745518.html

在iview的Table中添加Select（render）相关推荐

iview在table中添加图片
我们知道iview的table封装的太好,如果只是展示数据简直不要太简单,但是比如合并单元格就很麻烦,而我要做的是在table中添加图片建议大家先看一下这个:https://www.iviewui. ...
iview 动态控制 table中某一行select勾选框能否选中，以及某一行select勾选框能否显示(隐藏禁用的勾选框)。
如上图,这是一个vue页面中的table,在其columns中加了一个selection后,实现了多选/全选table行的功能: {type: 'selection',width: 60,align: ...
iview给table组件添加自增序号
傻逼了,iview自带了自增序号,还是记录一下吧 template: <Table:columns="informationTable":data="informa ...
OAF TABLE中添加序号列
在实际的OAF页面TABLE的使用中,会有很多时候需要在前台页面中显示序号,虽然在sql中可以使用rownum来获得序号,但是rounum的优先级比order by 高,所以在语句中order by ...
【mysql】table中添加列
前言 mysql 对已有table添加列操作命令 # 先登录mysql >mysql -uroot -p # 切换数据库 >use mydb; # 添加2列 >alter tabl ...
table中添加下拉框
1 { 2 file: 'usename', 3 title: '下发用户', 4 width:"20%", 5 align: 'center', 6 templet: funct ...
iView中table表格中使用select选框和下拉菜单的方法
首先是iview的表格中使用select选框 {title: '适用区域',//纵列表头(类似于th)width:140, //列表每一格的宽度align: 'center', //ivew里面的写法 ...
ivew的Table中使用render添加图片poptip冒泡方法
效果 ivew的Table中使用render添加图片poptip冒泡方法 {title: '操作',key: 'action',width: 120,align: 'center',render: ( ...
iview在render函数中添加Poptip提示
前言: 在使用iview的table的时候删除一般为了防止误删,我们会用 poptip 气泡提示来进行操作二次限制,这里使用iview的table的render函数渲染直接加入效果图: 实现代码: ...

在iview的Table中添加Select（render）

在iview的Table中添加Select（render）相关推荐

最新文章

热门文章