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)
           }

原文地址:https://www.cnblogs.com/meijiemu/p/8830975.html

时间: 2024-10-30 19:42:20

iview,用render函数渲染的相关文章

iview的render函数使用

iview表格的render函数作用是自定义渲染当前列,权限高于key,所以使用了render函数,那么表格的key值就无效了.render函数传入两个参数,第一个是 h,第二个是对象,包含 row.column 和 index,分别指当前单元格数据,当前列数据,当前是第几行. 具体用法: render:(h,params) => { return h(" 定义的元素 ",{ 元素的性质 }," 元素的内容"/[元素的内容])}1.一般情况:如果只有单文本情况

Vue.js(12)- 霸道的render函数渲染组件

index.html <div id="app"> <p>这是index.html</p> </div> index.js // 导入全的vue // import Vue from 'vue/dist/vue.js' // 导入阉割版的vue import Vue from 'vue' import App from './app.vue' const vm = new Vue({ el: '#app', template: `<

在 iView 的组件中使用 Render 函数渲染内容,可以通过设置 class 属性来自定义样式

下图所示一个Table组件的表头的 Render 内容,对其中的Checkbox组件设置名为 my-favor-features-checkbox 的 class 样式: 比如:下面的CSS将能够改变该 CheckBox 组件实例在 disabled 时的样式: 值得一提的是:通过给某个组件实例自定义一个独一无二的 class 样式名,即可以单独修改这个组件实例的样式,同时不影响当前项目中同类型的其它组件实例的样式,从页做到了样式的个性化. 原文地址:https://www.cnblogs.co

[转]iview的render函数用法

原文地址:https://www.jianshu.com/p/f593cbc56e1d 一.使用html的标签(例如div.p) 原生标签用法 二.使用iview的标签(例如Button) iview标签的用法 三.使用自己封装的组件(适用于复杂些的操作) 封装组件的用法h(Inputs)不加引号 原文地址:https://www.cnblogs.com/dirgo/p/11841747.html

【Vue】彻底理解Vue中render函数与template的区别

一.render函数与template对比 VUE一般使用template来创建HTML,然后在有的时候,我们需要使用javascript来创建html,这时候我们需要使用render函数. 以下我们来做一个需求跟根据level等级来编写对应等级的标题 template解析 <body>   <divid="app">       <h-titlelevel=1>           <p>li</p>       </

vue入门:(底层渲染实现render函数、实例生命周期)

vue实例渲染的底层实现 vue实例生命周期 一.vue实例渲染的底层实现 1.1实例挂载 在vue中实例挂载有两种方法:第一种在实例化vue时以el属性实现,第二种是通过vue.$mount()方法实现挂载.不管是哪种挂载都不影响vue实例化组件的执行流程和模式,只是通过vue.$mount()方法实现挂载可以更灵活的实现组件复用和挂载. 1 var vm = new Vue({ 2 el:'挂载元素id',//实例化el属性实现挂载 3 ... 4 }) 5 var vm1 = new Vu

Vue2.x中的Render函数

Render函数是Vue2.x版本新增的一个函数:使用虚拟dom来渲染节点提升性能,因为它是基于JavaScript计算.通过使用createElement(h)来创建dom节点.createElement是render的核心方法.其Vue编译的时候会把template里面的节点解析成虚拟dom: 什么是虚拟dom? 虚拟dom不同于真正的dom,它是一个JavaScript对象.当状态发生变化的时候虚拟dom会进行一个diff判断/运算:然后判断哪些dom是需要被替换的而不是全部重绘,所以性能

Vue学习笔记进阶篇——Render函数

本文为转载,原文:Vue学习笔记进阶篇--Render函数 基础 Vue 推荐在绝大多数情况下使用 template 来创建你的 HTML.然而在一些场景中,你真的需要 JavaScript 的完全编程的能力,这就是 render 函数,它比 template 更接近编译器. <h1> <a name="hello-world" href="#hello-world"> Hello world! </a> </h1>

vue render函数 函数组件化

之前创建的锚点标题组件是比较简单,没有管理或者监听任何传递给他的状态,也没有生命周期方法,它只是一个接受参数的函数 在这个例子中,我们标记组件为functional,这意味它是无状态(没有data),无实例(没有this上下文) 一个函数化组件就像这样: Vue.component('my-component', { functional: true, // 为了弥补缺少的实例 // 提供第二个参数作为上下文 render: function (createElement, context) {