<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. 分类器评估方法:ROC曲线

    注:本文是人工智能研究网的学习笔记 ROC是什么 二元分类器(binary classifier)的分类结果 ROC空间 最好的预测模型在左上角,代表100%的灵敏度和0%的虚警率,被称为完美分类器. ...

  2. leetcode第一刷_N-Queens II

    这个题好无趣,竟然输出解的个数.前一个题把全部解都输出出来了.还愁不知道解的个数吗. . 我怀疑这个解的个数是有一个类似通项的东西,就上网查了一下.没有啊亲,最后就把上一题的代码略微改了一下过掉了. ...

  3. oracle 删除字段中空格

    update  sales_report set region =  REGEXP_REPLACE(region,  '( ){1,}', '')

  4. WebClient 通过get和post请求api

    //get 请求        string url = string.Format("http://localhost:28450/api/values?str1=a&str2=b ...

  5. socket recv阻塞与非阻塞error总结

    recv是socket编程中最常用的函数之一,在阻塞状态的recv有时候会返回不同的值,而对于错误值也有相应的错误码,分别对应不同的状态,下面是我针对常见的几种网络状态的简单总结. 首先阻塞接收的re ...

  6. FFMPEG采集摄像头数据并切片为iPhone的HTTP Stream流

    一.Windows下面编译ffmpeg 首先需要解决的问题是:在windows下面编译 ffmpeg, 并让其支持dshow, 本人把ffmpeg编译成功了, 但是编译出来的ffmpeg不支持dsho ...

  7. 解决Mac OS下安装MyEclipse报错:Your system does not have sufficient memory to support MyEclipse

    最近想尝尝鲜,FQ去www.myeclipseide.com上下载了最新版的MyEclipse 15CI版,安装的时候,报告如下错误(MyEclipse 14也会出现这个问题): Your syste ...

  8. 对一个前端AngularJS,后端OData,ASP.NET Web API案例的理解

    依然chsakell,他写了一篇前端AngularJS,后端OData,ASP.NET Web API的Demo,关于OData在ASP.NET Web API中的正删改查没有什么特别之处,但在前端调 ...

  9. 用xcode 5 开发访问IOS 7上面的通讯录有问题

    NSMutableArray *addressBookTemp = [NSMutableArray array]; ABAddressBookRef addressBooks = ABAddressB ...

  10. 关于面试总结6-SQL经典面试题

    前言 用一条SQL 语句查询xuesheng表每门课都大于80 分的学生姓名,这个是面试考sql的一个非常经典的面试题 having和not in 查询 xuesheng表每门课都大于80 分的学生姓 ...