iview渲染函数
<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渲染函数的更多相关文章
- 基于VueJS的render渲染函数结合自定义组件打造一款非常强大的IView 的Table
基于VueJS的render渲染函数结合自定义组件打造一款非常强大的IView 的Table https://segmentfault.com/a/1190000015970367
- 理解Vue中的Render渲染函数
理解Vue中的Render渲染函数 VUE一般使用template来创建HTML,然后在有的时候,我们需要使用javascript来创建html,这时候我们需要使用render函数.比如如下我想要实现 ...
- 从虚拟dom了解vue渲染函数
vue渲染函数就是render函数,他会返回一个VNode,VNode是一个js对象,是dom的映射 vue在介绍渲染函数那个章节看的不是很懂,所以想要彻底的理解渲染函数,首先需要了解vue的虚拟do ...
- vue从入门到进阶:渲染函数 & JSX(八)
Vue 推荐在绝大多数情况下使用 template 来创建你的 HTML.然而在一些场景中,你真的需要 JavaScript 的完全编程的能力,这就是 render 函数,它比 template 更接 ...
- vue 渲染函数&jsx
前端更新状态,更新视图,所以性能问题主要由Dom操作引起的,而js解析编译dom渲染就要快得多, 所把要js和html混写. vue 的动态js操作 html 方法:reader函数: vue ...
- Vue渲染函数
前面的话 Vue 推荐在绝大多数情况下使用 template 来创建HTML.然而在一些场景中,真的需要 JavaScript 的完全编程的能力,这就是 render 函数,它比 template 更 ...
- 渲染函数render和函数式组件
vnode对象 vnode对象包括(vnode并不是vue实例,而是vue实例中渲染函数render执行后生成的结果) this.tag = tag // 当前节点标签名 this.data = da ...
- Vue:模板&渲染函数学习
模板&渲染函数区别: 1.代码量:模板代码重复逐行拼写,渲染函数可以迭代拼接方式实现重复代码. 2.函数式组件中应用:基于模板的函数式组件需要手动添加特性和事件,给予渲染函数的函数是组件使用c ...
- Vue.js 渲染函数, JSX(未掌握,未学完)
渲染函数 , JSX(没完成学习) 基础: 实例属性:vm.$slots default 属性包括了所有没有被包含在具名插槽中的节点. 渲染函数: render: function(createEle ...
随机推荐
- GYCTF Node game
考点: NodeJS 代码审计 SSRF 请求夹带 复现: 不太懂js,先留着吧,学懂了再记录
- Excel数据源增加时,渗透表如何刷新?
使用Excel制作渗透表的时候在选择数据源范围的时候不要选择有限区域!!!最好圈定列范围 问题:制作渗透表是,在选择数据区域时使用[Ctrl + A]或者选定有限的数据区域,从而导致当数据源增加时,渗 ...
- c++ stl在竞赛里的使用总结
SET bzoj2761: [JLOI2011]不重复数字 这题... count() 的用法,返回这个值出现的次数,但是在set里只会出现0次和1次,这个可以判断某个值是否在set里出现过 还有si ...
- 【Python】圆周率的计算
1.公式法 代码: #CalPiV1.py pi=0 N=100 for k in range(N): pi+=1/pow(16,k)*(\ 4/(8*k+1)-2/(8*k+4)-\ 1/(8*k ...
- @HystrixCommand 不能被导包
添加pom文件 <dependency> <groupId>com.netflix.hystrix</groupId> <artifactId>hy ...
- openlayers 保存当前地图View为图片
/** * 保存地图为图片工具栏 */function addMapToolSavePicture() { var saveElement = document.createElement('a'); ...
- solr es调优化和问题排查
(1)TOP 显示当前进程状态,结合 ps -aux 可以看是哪一个服务.mpstat 可以看是cpu的负载 (2)TOP -H -u 用户名 显示该用户下 所有的线程. 还有pstree (3)js ...
- Oracle 中的 Incarnation 到底是个什么?实验操作篇
对于“化身”Incarnation概念了解之后,本篇通过手工恢复实验来具体操作演示,加深对Incarnation的理解,来自于博客园AskScuti. 你可以点击此处查看<概念理解篇>. ...
- 0216 aop和打印数据库执行日志
需求 maven依赖 <dependency> <groupId>p6spy</groupId> <artifactId>p6spy</artif ...
- JDBC——ResultSet结果集对象
ResultSet结果集对象,封装结果.它是怎么做到封装结果的呢? 游标,类似指针索引最初指在“列名”上,要取到数据就需要让游标向下移动移动后就指向了第一行数据,然后通过一些方法把第一行的每一列都取出 ...