iview,用render函数渲染
<Table border :columns="discountColumns" :data="discountData.rows"></Table>
discountData: {
total: 1, rows: [
{
randomDiscountRangeMax: '',
randomDiscountRangeMin: '',
population: ''
},
],
defaultRows:
{
randomDiscountRangeMax: '',
randomDiscountRangeMin: '',
population: ''
},
}
discountColumns: [
{
key: 'randomDiscountRange',
align: 'center',
title: '随机立减范围',
render: (h, params) => {
var me = this
return h('div', [h('Input', {
props: {
type: 'text',
value: me.discountData.rows[params.index].randomDiscountRangeMin,
disabled: this.getIsDetail(),
},
style: {
width: '100px'
},
on: {
'on-blur': (event) => {
me.discountData.rows[params.index].randomDiscountRangeMin = event.target.value
}
}
}),
h('span', '元<=随机立减金额<'),
h('Input', {
props: {
type: 'text',
value: me.discountData.rows[params.index].randomDiscountRangeMax,
disabled: this.getIsDetail(),
},
style: {
width: '100px'
},
on: {
'on-blur': (event) => {
this.discountData.rows[params.index].randomDiscountRangeMax = event.target.value
}
}
}),
h('span', '元')])
}
},
{
key: 'population',
align: 'center',
title: '概率',
width: 300,
render: (h, params) => {
var me = this
return h('div', [h('Input', {
props: {
type: 'text',
value: me.discountData.rows[params.index].population,
disabled: this.getIsDetail(),
},
style: {
width: '100px'
},
on: {
'on-blur': (event) => {
this.discountData.rows[params.index].population = event.target.value
}
}
}), h('span', '%')])
}
}, {
key: 'operation',
align: 'center',
title: '操作',
width: 200,
render: (h, params) => {
return h('div', [
h('Button', {
props: {
type: 'primary',
shape: 'circle',
icon: 'plus',
disabled: this.getIsDetail(),
},
style: {
display: params.index !== 0 ? 'none' : 'inline'
},
on: {
click: () => {
this.add('discountData')
}
}
}), h('Button', {
props: {
type: 'primary',
shape: 'circle',
icon: 'minus',
disabled: this.getIsDetail(),
},
style: {
display: params.index === 0 ? 'none' : 'inline'
},
on: {
click: () => {
this.remove(params.index, 'discountData')
}
}
})
])
}
}
]
add (dataName) {
var obj = JSON.parse(JSON.stringify(this[dataName].defaultRows))
this[dataName].rows.push(obj)
}
remove (index, value) {
this[value].rows.splice(index, 1)
}

iview,用render函数渲染的更多相关文章
- render 函数渲染表格的当前数据列使用
columns7: [ { title: '编号', align: 'center', width: 90, key: 'No', render: (h, params) => { return ...
- 使用render函数渲染组件
使用render函数渲染组件:https://www.jianshu.com/p/27ec4467a66b
- iview的render函数使用
render渲染函数详解 https://www.cnblogs.com/weichen913/p/9676210.html iview表格的render函数作用是自定义渲染当前列,权限高于key,所 ...
- iview中render函数监听事件
iview的table中添加datepicker在组件中嵌套组件,如果需要监听子组件的自定义事件,应该使用render中的on:{ 'on-change' () => { console.log ...
- 在vue中结合render函数渲染指定的组件到容器中
1.demo 项目结构: index.html <!DOCTYPE html> <html> <head> <title>标题</title> ...
- [转]iview的render函数用法
原文地址:https://www.jianshu.com/p/f593cbc56e1d 一.使用html的标签(例如div.p) 原生标签用法 二.使用iview的标签(例如Button) iview ...
- [转]iview render函数常用总结(vue render函数)
原文地址:https://blog.csdn.net/weixin_43206949/article/details/89385550 iview 的render函数就是vue的render函数ivi ...
- iview table表中使用render函数props传值出现问题
使用iview中的table表格时避免不了使用render函数渲染自定义内容,或者渲染组件.但是在正常使用时出现了props传值无法识别, 按照官网介绍使用props如下: render: (h, p ...
- iview使用之怎样通过render函数在table组件表头添加图标及判断多个状态
在实际项目开发中,我们经常会用到各种各样的表格,比如在表格中填加下拉菜单,按钮,图标及可以根据状态显示对应文字等等,因为这段时间一直在做后台管理系统,所以表格用的就比较多,当然UI组件库我用的是ivi ...
随机推荐
- react比较入门的小demo
什么是jsx? JSX是JavaScript XML 这两个单词的缩写,xml和html非常类似,简单来说可以把它理解成使用各种各样的标签,大家可以自行 百度.所以jsx就是在javascri ...
- BZOJ.1034.[ZJOI2008]泡泡堂(贪心)
题目链接 容易想到田忌赛马.但是是不对的,比如2 3对1 3,按田忌赛马策略会3->1 2->3,但是3->3 2->1显然更优. 而如果按己方最强>=对方最强则开打,也 ...
- Stf-windows版本
Stf-windows Stf 原项目地址:https://github.com/openstf/stf . 介绍 用于Web端设备远程管理 系统支持 支持Android版本2.3.3 (SDK10) ...
- Codeforces Round #369 (Div. 2) D. Directed Roads 数学
D. Directed Roads 题目连接: http://www.codeforces.com/contest/711/problem/D Description ZS the Coder and ...
- hdu 5821 Ball 贪心
Ball 题目连接: http://acm.hdu.edu.cn/showproblem.php?pid=5821 Description ZZX has a sequence of boxes nu ...
- 如果想使用GIT Extentions的解决冲突窗口,安装时必须勾选KDIFF3
因为第一次安装时,没有选择同时安装KDIFF3,所以遇到冲突时,点击合并,始终无法弹出合并窗口. 还有一个问题,就是在安装时,要选择OpenSSH,不要选择PuTTY.
- spring cloud 学习(4) - hystrix 服务熔断处理
hystrix 是一个专用于服务熔断处理的开源项目,当依赖的服务方出现故障不可用时,hystrix有一个所谓的断路器,一但打开,就会直接拦截掉对故障服务的调用,从而防止故障进一步扩大(类似中电路中的跳 ...
- 微信小程序开发需要注意的29个坑
1.小程序名称可以由中文.数字.英文.长度在3-20个字符之间,一个中文字等于2个字符. 2.小程序名称不得与公众平台已有的订阅号.服务号重复.如提示重名,请更换名称进行设置. 3.小程序名称在帐号信 ...
- Oracle初始化参数之memory_target
一.引言: Oracle 9i引入pga_aggregate_target,可以自动对PGA进行调整: Oracle 10g引入sga_target,可以自动对SGA进行调整: Oracle 11g则 ...
- discuz修改太阳,月亮,星星等级图标
想必大家都想修改一下默认的等级图标吧,刚才在论坛上看见很多大神的方法都是要修改文件的,不过为了安全起见需要事先备份好才改,这种方法是可行的,但可能有些新手站长不会修改,又或者改错了恢复不来,现在我教大 ...