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 ...
随机推荐
- java并发基础(四)--- 取消与中断
<java并发编程实战>的第7章是任务的取消与关闭.我觉得这一章和第6章任务执行同样重要,一个在行为良好的软件和勉强运行的软件之间的最主要的区别就是,行为良好的软件能很完善的处理失败.关闭 ...
- Delphi 资源管理器套件
需要个类似资源管理器的东西, 首先试了下 TDriveComboBox.TDirectoryListBox.TFileListBox, 嘿! Win31 时代的东西, 不是一般地丑. 试了下 Vcl. ...
- 【原创】Nginx+PHP-FPM优化技巧总结(转)
php-fpm的安装很简单,参见PHP(PHP-FPM)手动编译安装.下面主要讨论下如何提高Nginx+Php-fpm的性能. 1.Unix域Socket通信 之前简单介绍过Unix Doma ...
- [廖雪峰] Git 分支管理(3):分支管理策略
通常,合并分支时,如果可能,Git 会用 Fast forward 模式,但这种模式下,删除分支后,会丢掉分支信息. 如果要强制 禁用 Fast forward 模式,Git 就会在 merge 时生 ...
- 【Go命令教程】1. 标准命令详解
Go 语言的 1.5 版本在标准命令方面有了重大变更.这倒不是说它们的用法有多大的变化,而是说它们的底层支持已经大变样了.让我们先来对比一下 $GOROOT/pkg/tool/< 平台相关目录 ...
- ProFTPd Local pr_ctrls_connect Vulnerability - ftpdctl 漏洞及攻击代码分析
攻击代码网址:http://www.exploit-db.com/exploits/394/ 1.执行环境: 1.ProFTPD 1.3.0/1.3.0a 2.编译ProFTPD时.--enable- ...
- 在使用SQLServer时忘记sa账号密码解决办法
先以windows 身份验证方式登录SQLServer数据库,如下图所示: 打开查询分析器,运行如下代码: sp_password Null,'新密码','sa' 即可把原来的密码修改成新密码 例如: ...
- SQLCE使用
Windows Phone的本地数据库SQL Server CE是7.1版本即芒果更新的新特性,所以你要在应用程序中使用SQL Server CE数据库必须使用Windows Phone 7.1的AP ...
- VirtualBox - NAT虚拟机访问外网 + Host-Only物理主机虚拟机互访
[root@localhost ~]# vi /etc/sysconfig/network-scripts/ifcfg-System_eth0 # 未手动设定HOST-ONLY静态IP时的默认值 #T ...
- mysql慢查询监控及sql优化
在my.ini添加如下代码,即可查看那个sql语句执行慢了 log-slow-queries = d:/log/mysql-slow.log long_query_time = 1 打开日志 log ...