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

  1. 基于VueJS的render渲染函数结合自定义组件打造一款非常强大的IView 的Table

    基于VueJS的render渲染函数结合自定义组件打造一款非常强大的IView 的Table https://segmentfault.com/a/1190000015970367

  2. 理解Vue中的Render渲染函数

    理解Vue中的Render渲染函数 VUE一般使用template来创建HTML,然后在有的时候,我们需要使用javascript来创建html,这时候我们需要使用render函数.比如如下我想要实现 ...

  3. 从虚拟dom了解vue渲染函数

    vue渲染函数就是render函数,他会返回一个VNode,VNode是一个js对象,是dom的映射 vue在介绍渲染函数那个章节看的不是很懂,所以想要彻底的理解渲染函数,首先需要了解vue的虚拟do ...

  4. vue从入门到进阶:渲染函数 & JSX(八)

    Vue 推荐在绝大多数情况下使用 template 来创建你的 HTML.然而在一些场景中,你真的需要 JavaScript 的完全编程的能力,这就是 render 函数,它比 template 更接 ...

  5. vue 渲染函数&jsx

    前端更新状态,更新视图,所以性能问题主要由Dom操作引起的,而js解析编译dom渲染就要快得多,  所把要js和html混写. vue 的动态js操作 html  方法:reader函数: vue  ...

  6. Vue渲染函数

    前面的话 Vue 推荐在绝大多数情况下使用 template 来创建HTML.然而在一些场景中,真的需要 JavaScript 的完全编程的能力,这就是 render 函数,它比 template 更 ...

  7. 渲染函数render和函数式组件

    vnode对象 vnode对象包括(vnode并不是vue实例,而是vue实例中渲染函数render执行后生成的结果) this.tag = tag // 当前节点标签名 this.data = da ...

  8. Vue:模板&渲染函数学习

    模板&渲染函数区别: 1.代码量:模板代码重复逐行拼写,渲染函数可以迭代拼接方式实现重复代码. 2.函数式组件中应用:基于模板的函数式组件需要手动添加特性和事件,给予渲染函数的函数是组件使用c ...

  9. Vue.js 渲染函数, JSX(未掌握,未学完)

    渲染函数 , JSX(没完成学习) 基础: 实例属性:vm.$slots default 属性包括了所有没有被包含在具名插槽中的节点. 渲染函数: render: function(createEle ...

随机推荐

  1. VPS性能测试shell工具以及锐速安装

    比较熟悉的UnixBench非常耗费资源,需要长时间跑满cpu和IO,很多主机商都深恶痛绝,会做各种限制,其实也代表不了实际使用的业务效果,毕竟真正需要那么多cpu和IO的应用并不多.而网络状况却是大 ...

  2. python&mysql

    第一种方法,使用 pymysql库 import pymysql.cursors # Connect to the database connection = pymysql.connect(host ...

  3. BZOJ 3438 小M的礼物

    BZOJ 3438 小M的礼物 Description 小M在MC里开辟了两块巨大的耕地A和B(你可以认为容量是无穷),现在,小P有n中作物的种子,每种作物的种子 有1个(就是可以种一棵作物)(用1. ...

  4. POJ 1099 Square Ice 连蒙带猜+根据样例找规律

    目录 题面 思路 思路 AC代码 题面 Square Ice Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 4526   A ...

  5. java - 锁的种类及详解

    锁类型 锁根据其特性能够划分出各种各样的锁类型,该文主要介绍以下锁的作用及特性 乐观锁/悲观锁 独享锁/共享锁 互斥锁/读写锁 可重入锁 公平锁/非公平锁 分段锁 偏向锁/轻量级锁/重量级锁 自旋锁 ...

  6. R语言函数化编程笔记1

    R语言函数化编程笔记1 notes:有一个不错的网站叫做stack overflow,有问题可以从上面找或者搜索答案,会有大佬相助. 在github上面可以找到很多R的扩展包,如果自己额修改被接受,那 ...

  7. Vuejs开发环境的搭建

    Windows系统上搭建VueJS开发环境 1.安装node.js:在node.js官网下载对应系统的msi包并安装 注:node的安装分全局和本地模式.一般情况下会以本地模式运行,包会被安装到和你的 ...

  8. 前端:将网站打造成单页面应用SPA

    前端:将网站打造成单页面应用SPA   前言 不知你有没有发现,像Github.百度.微博等这些大站,已经不再使用普通的a标签做跳转了.他们大多使用Ajax请求替代了a标签的默认跳转,然后使用HTML ...

  9. Codeforce 474A - Keyboard

    Our good friend Mole is trying to code a big message. He is typing on an unusual keyboard with chara ...

  10. MyBatis的手动映射与模糊查询

    一.手动映射 当实体类属性与数据库字段名不同时,无法自动映射,导致查询出空值,这时候可以使用手动映射 在select节点添加resultMap属性与resultMap节点建立关系