<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函数渲染的更多相关文章

  1. render 函数渲染表格的当前数据列使用

    columns7: [ { title: '编号', align: 'center', width: 90, key: 'No', render: (h, params) => { return ...

  2. 使用render函数渲染组件

    使用render函数渲染组件:https://www.jianshu.com/p/27ec4467a66b

  3. iview的render函数使用

    render渲染函数详解 https://www.cnblogs.com/weichen913/p/9676210.html iview表格的render函数作用是自定义渲染当前列,权限高于key,所 ...

  4. iview中render函数监听事件

    iview的table中添加datepicker在组件中嵌套组件,如果需要监听子组件的自定义事件,应该使用render中的on:{ 'on-change' () => { console.log ...

  5. 在vue中结合render函数渲染指定的组件到容器中

    1.demo 项目结构: index.html <!DOCTYPE html> <html> <head> <title>标题</title> ...

  6. [转]iview的render函数用法

    原文地址:https://www.jianshu.com/p/f593cbc56e1d 一.使用html的标签(例如div.p) 原生标签用法 二.使用iview的标签(例如Button) iview ...

  7. [转]iview render函数常用总结(vue render函数)

    原文地址:https://blog.csdn.net/weixin_43206949/article/details/89385550 iview 的render函数就是vue的render函数ivi ...

  8. iview table表中使用render函数props传值出现问题

    使用iview中的table表格时避免不了使用render函数渲染自定义内容,或者渲染组件.但是在正常使用时出现了props传值无法识别, 按照官网介绍使用props如下: render: (h, p ...

  9. iview使用之怎样通过render函数在table组件表头添加图标及判断多个状态

    在实际项目开发中,我们经常会用到各种各样的表格,比如在表格中填加下拉菜单,按钮,图标及可以根据状态显示对应文字等等,因为这段时间一直在做后台管理系统,所以表格用的就比较多,当然UI组件库我用的是ivi ...

随机推荐

  1. 关于ListView中EditText在软键盘弹出后的焦点问题

    转自:http://www.cnblogs.com/haofei/p/3305030.html 在ListView中,每次弹出软键盘后就会重新调用getView()方法,导致EditText失去焦点. ...

  2. ZOJ 2975 Kinds of Fuwas

    K - Kinds of Fuwas Time Limit:2000MS     Memory Limit:65536KB     64bit IO Format:%lld & %llu De ...

  3. redis 写磁盘出错 Can’t save in background: fork: Cannot allocate memory (转)

    查看 Redis 日志 发现系统在频繁报错: [26641] 18 Dec 04:02:14 * 1 changes in 900 seconds. Saving… [26641] 18 Dec 04 ...

  4. RSS介绍、RSS 2.0规范说明和示例代码

    RSS是一种消息来源格式规范,用以发布经常更新资料的网站,例如博客.新闻的网摘.RSS文件,又称做摘要.网摘.更新.频道等,包含了全文或节选文字,再加上一定的属性数据.RSS让发布者自动发布信息,也使 ...

  5. perl解析xml-XML::Simple/XMLin

    转自: http://blog.charlee.li/perl-xml-simple/ [Perl]用XML::Simple解析XML文件 在Perl中解析XML的方法最常见的就是使用 XML::DO ...

  6. kernel logo到开机动画之间闪现黑屏(android 5.X)

    在BootAnimation開始画图之前,会先做一次clear screen的动作,避免出现前面的图干扰到BootAnimation的显示. 通过check main_log先确认播放开机动画是哪个f ...

  7. 在ASP.NET MVC控制器中获取链接中的路由数据

    在ASP.NET MVC中,在链接中附加路由数据有2种方式.一种是把路由数据放在匿名对象中传递: <a href="@Url.Action("GetRouteData&quo ...

  8. file is universal (4 slices) but does not contain a(n) armv7s slice

    关于ld: file is universal (2 slices) but does not contain a(n) armv7s slice 升级了xcode之后,支持iOS6和iPhone5, ...

  9. 为网卡配置多个IP地址(windows)

    转自:https://jingyan.baidu.com/article/fcb5aff7e0fd76edaa4a71d3.html 为电脑配置多个IP,免去到不同地点需要更改IP的烦恼. 譬如电脑在 ...

  10. Unity Shader-渲染队列,ZTest,ZWrite,Early-Z

    在渲染阶段,引擎所做的工作是把所有场景中的对象按照一定的策略(顺序)进行渲染.最早的是画家算法,顾名思义,就是像画家画画一样,先画后面的物体,如果前面还有物体,那么就用前面的物体把物体覆盖掉,不过这种 ...