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 ...
随机推荐
- 2018 ACM 国际大学生程序设计竞赛上海大都会部分题解
题目链接 2018 ACM 国际大学生程序设计竞赛上海大都会 下午午休起床被同学叫去打比赛233 然后已经过了2.5h了 先挑过得多的做了 .... A题 rand x*n 次点,每次judge一个点 ...
- 五校联考R1 Day1T3 平面图planar(递推 矩阵快速幂)
题目链接 我们可以把棱柱拆成有\(n\)条高的矩形,尝试递推. 在计算的过程中,第\(i\)列(\(i\neq n\))只与\(i-1\)列有关,称\(i-1\)列的上面/下面为左上/左下,第\(i\ ...
- NOI 2002 荒岛野人
人生第一次做NOI的题祭!!! 大概是NOI最简单的一道题 克里特岛以野人群居而著称.岛上有排列成环行的M个山洞.这些山洞顺时针编号为1,2,…,M.岛上住着N个野人,一开始依次住在山洞C1,C2,… ...
- VMware 使用本机代理上网
灰机使用方法 VMware 安装方法 首先解决主机的配置 1.查询本机 IP 地址,使用 ipconfig /all 2.更改小灰机的设置 3.虚拟机设置 4.Ubuntu 设置
- 10分钟上手python pandas
目录 Environment 开始 对象创建 查看数据 选择 直接选择 按标签选择 按位置选择 布尔索引 设置 缺失数据 操作 统计 应用(apply) 直方图化(Histogramming) 字符串 ...
- MikroTik RouterOS获取在线终端和在线IP总数并自动对IP做限速(转)
1.将在线IP自动添加到地址列表 2.实时检测在线IP数 :local s 0 :foreach i in=[/ip firewall address-list find list=Online] d ...
- KL46 custom board SWD reset is never asserted - SWS Waveform
KL46 custom board SWD reset is never asserted Hi everybody, I'm trying to program a custom board bas ...
- KTAG K-TAG ECU Programming Tool
KTAG K-TAG ECU Programming Tool Master Version V2.1 +J-Link JLINK Without Token Limitation Highlight ...
- linux socket talkclient talkserver示例
cleint: #define _GNU_SOURCE 1 #include <sys/types.h> #include <sys/socket.h> #include &l ...
- muduo 的 shutdown() 没有直接关闭 TCP 连接?
http://blog.csdn.net/Solstice/article/details/6208634 今天收到一位网友来信: 在 simple 中的 daytime 示例中,服务端主动关闭时调用 ...