iview table行render渲染不同的组件

table不同的行,相同的列渲染不同的组件,如图1:第一行渲染selece,第二行渲染input

render:(h,params)=>{    if(params.index === 0){    //以params.index为条件渲染        return h(‘div‘,[            h(‘Input‘,{                props:{

},                style:{},                on:{                    ‘on-change‘:(e)=>{                        console.log(e.target.value)                    }                }            })        ])    };    if(params.index === 1){        return h(‘div‘,[            h(‘Select‘,{                props:{

},                style:{},                on:{                    ‘on-change‘:(e)=>{                        console.log(e.target.value)                    }                }            })        ])    };    if(params.index === 2){        return h(‘div‘,[            h(‘InputNumber‘,{                props:{                    min:0                },                style:{                    width:‘100%‘                },                on:{                    ‘on-change‘:(e)=>{                        console.log(e.target.value)                    }                }            })        ])    };}



原文地址:https://www.cnblogs.com/web-zqk/p/9593672.html

时间: 2024-10-08 11:18:58

iview table行render渲染不同的组件的相关文章

vue+element ui table组件封装,使用render渲染

后台管理经常会用到表格,一开始封装了一个常用的功能性表格,点击这里: 后来由于需求增加,在表格中还会用到switch,select,input等多种组件,每次都要在html中增加<el-table-column></el-table-column>, 维护起来相当麻烦,就想到了使用render渲染. 组件内部封装代码: <template> <el-table :data="tableData" size="medium"

iview Table组件使用过滤器时无法加载表头解决办法

title: iview Table组件使用过滤器时无法加载表头解决办法 date: 2018-10-01 15:08:50 tags: JavaScript 前端 vue iview 所遇到的问题 使用iview搭建社团用人员管理时,Table组件的columns中filters属性设置为Vue data 中的另一个对象 如下: data() { groupFilter: [], memberCol: [ { title: "组别", render: (h, params) =>

table行转列

table行转列 摘要 在使用ews调用exhange的收件箱的并在h5页面显示邮件详情的时候,因为返回的每封邮件的内容都是htmlbody,没有textbody.每封邮件又没什么规律,用正则表达式来匹配内容并不合适,另外又要保持原邮件的格式.这个确实很难统一.目前是使用iframe标签,将原邮件的html在iframe中展示.但问题又来了,如果邮寄中有大表格,大图片,如何保持邮件内容自适应? 思考 通常的做法是在head中添加meta标签 <meta name="viewport&quo

asp.net实现动态添加table行

asp.net动态的生成,删除table的行,主要是在后台动态创建单元行,单元表格,效果图: 2.代码: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="releaseAffair.aspx.cs" Inherits="affair_releaseAffair" %> <!DOCTYPE html> <!--发布事务页面:名称Affa

Table行合并操作

此方法不可取,但几天心血 保留,已有新想法,稍后会出一个完善的Table行列合并方法 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <

jquery 删除table行,该如何解决

query 删除table行< table >  < tbody >  < tr >  < td > 这行原来就有 </ td >  < td >< button class = " del " > 删除 </ button ></ td >  </ tr >  < tr >  < td > 这行原来就有 </ td >  <

table行随鼠标变色

table行随鼠标变色 1.设计表格 <body class="html_body"> <div class="body_div"> <table id="tab"> <tr style="background: #000000;color: #FFFFFF;font-weight: bolder;"> <th>工号</th> <th>姓名&l

【react】 redux 公共状态管理---数据的渲染,数据的修改,再把修改的数据渲染到当前组件

首先需要明白,redux中有方法,这些方法是封装好的 dispatch 方法是根据动作做派发的过程getState 方法是返回当前store中的state的数据subscribe 方法是事件订阅,参是一个函数,它有一个数值专门存放函数,当执行对应的事件函数,就会遍历触发该数组中的函数 1.store中的state数据渲染到当前组件 2.对store中的state的数据进行修改 在当前组件,触发,当前组件引入的store文件中的dispatch(派发器,根据传入的动作做不的行为事件),reduce

Vue iview中的render小案例3

当我按下play.穿梭在大街小巷没什么不对.每个人都会.只是你在束缚自己.快来做个一等一的player.要求自己不能够太普通.一定必须要去做点成就 Vue iview中的render小案例 第一个数据比较好拿是对象直接.就可以,第二个是数组所以需要遍历会麻烦些 工序一道也少不了,就像下面迟早会补齐的 每天记录一点点 { title: "场馆地址", // key: "gymnasium.name" render: (h, params) => { return