<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. 深入浅出Mybatis系列八-mapper映射文件配置之select、resultMap

    注:本文转载自南轲梦 注:博主 Chloneda:个人博客 | 博客园 | Github | Gitee | 知乎 上篇<深入浅出Mybatis系列(七)---mapper映射文件配置之inse ...

  2. JS 获取验证码 倒计时

    setInterval 一个定时器搞定 <style> button{ background: #45BCF9; color: #fff; padding: 4px 10px; borde ...

  3. 开始自学JAVA了,找到一点有用的资料(不定时更新)

    入门代码https://blog.csdn.net/salmonwilliam/article/details/81952387 高精度https://www.cnblogs.com/downrain ...

  4. Longest Ordered Subsequence POJ - 2533 dp 最长上升/不下降 子序列

    #include<iostream> using namespace std ; ; int f[N]; int a[N]; int n; int main() { cin>> ...

  5. linux - redis-trib.rb 命令详解

    参考网站 http://www.cnblogs.com/ivictor/p/9768010.html 简介 redis-trib.rb是官方提供的Redis Cluster的管理工具,无需额外下载,默 ...

  6. cmd 运行py脚本,提示找不到xx模块

    一.在学习Django+接口自动化测试,用Jenkins做定时任务,cmd运行脚本时提示 "找不到xx模块": 1.原因:Pycharm单独运行脚本时没问题,cmd运行找不到模块. ...

  7. vue 中的路由为什么 采用 hash 路由模式,而不是href超链接模式(Hypertext,Reference)?

    1. vue中路由模式的种类有两种 1. 一种是 hash 模式. 2. 一种是 h5 的 history 模式. 2. hash 和 history 都是来自 bom 对象 bom 来自 windo ...

  8. resize函数

    #include<opencv2/opencv.hpp>#include<opencv2/highgui.hpp> using namespace cv;using names ...

  9. 创建JDBC六个步骤

    JDBC库中所包含的API通常与数据库使用于: 连接到数据库 创建SQL或MySQL语句 在数据库中执行SQL或MySQL查询 查看和修改数据库中的数据记录 创建JDBC应用程序 建立一个JDBC应用 ...

  10. WPF学习笔记四之命令

    1.概念 对于程序来说,命令就是一个个任务,例如保存,复制,剪切这些操作都可以理解为一个个命令.即当我们点击一个复杂按钮时,此时就相当于发出了一个复制的命令,即告诉文本框执行一个复杂选中内容的操作,然 ...