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)
}
}
})
])
};
}
iview table行render渲染不同的组件的更多相关文章
- vue iView table中render渲染
<template> <div class="srm-page"> <el-form ref="form" :model=&quo ...
- iview table的render()函数基本的用法
render:(h,params) => { return h(" 定义的元素 ",{ 元素的性质 }," 元素的内容"/[元素的内容]) }
- iview table的render()函数的用法
语法:render:(h,params)=>{} render:(h,params) => { return h(" 定义的元素 ",{ 元素的性质 }," ...
- 基于VueJS的render渲染函数结合自定义组件打造一款非常强大的IView 的Table
基于VueJS的render渲染函数结合自定义组件打造一款非常强大的IView 的Table https://segmentfault.com/a/1190000015970367
- vue+element ui table组件封装,使用render渲染
后台管理经常会用到表格,一开始封装了一个常用的功能性表格,点击这里: 后来由于需求增加,在表格中还会用到switch,select,input等多种组件,每次都要在html中增加<el-tabl ...
- 使用 iview Table 表格组件修改操作的显示隐藏
使用 iview Table 表格组件修改操作的显示隐藏,如下图 1.如何设置 table 操作按后台传入的状态值去渲染 不同的按钮? 解决方法 我们在vue2中,动态渲染html 使用的是 retu ...
- 普通组件定义渲染和render渲染组件的区别(三)
普通方式定义组件和效果: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
- iview table里面 插入下拉列表组件(自定义组件)一定要加key,不加key,table开始会加载所有数据,然后再从第2页点回第一页,就会走onChange事件,混乱的逻辑,切记加:key
iview table里面 插入下拉列表组件(自定义组件)一定要加key,不加key,table开始会加载所有数据,然后再从第2页点回第一页,就会走onChange事件,混乱的逻辑,切记加:key 关 ...
- iview table icon dorpdown html页面级别vue组件 #vuez#
iview table icon dorpdown html页面级别vue组件 <!DOCTYPE html> <html> <head> <meta cha ...
随机推荐
- Asp.NetCore程序发布到CentOs(含安装部署netcore)--最佳实践(一)
环境 本地 win7 服务器:Virtual Box 上的Centos ssh工具: Xshell 文件传输: xftp 1.在本地创建asp.net core应用发布 1.1 使用Vs2017 新建 ...
- C#服务器控件 IsReadOnly 和 Visibility,IsEnable 的区别
IsReadOnly 适用于“输入.输出”类控件,比如TextBox类, 可以当做文本输入,也可以通过后台代码进行输出. 设置 IsReadOnly(只读) = true 后,该控件只允许输出,不允 ...
- Java开发笔记(四十二)日历工具的常见应用
前面介绍了日历工具Calendar的基本用法,乍看起来Calendar与Date两个半斤八两,似乎没有多大区别,那又何苦庸人自扰鼓捣一个新玩意呢?显然这样小瞧了Calendar,其实它的作用大着呢,接 ...
- React常见的15个问题
在 jsComplete,我们管理一个专门用于帮助编程学习者 slack 帐户.我们常常会收到一些有趣的问题,但大多数问题都是常见问题. 我创建这个资源为了帮助 React.js学习者遇到这些常见的问 ...
- 手机端两端对齐,兼容ios,安卓
.div-title p label{ text-align: justify; width: 18%; display: inline-block; text-align-last: justify ...
- TS学习随笔(六)->断言
now,我们来看一看TS里面的断言,听起来很上档次啊,其实看完你就发出惊叹,这就是断言啊 类型断言 类型断言(Type Assertion)可以用来手动指定一个值的类型 语法 <类型>值 ...
- 【阿里云】在 Windows Server 2016 下使用 FileZilla Server 安装搭建 FTP 服务
Windows Server 2016 下使用 FileZilla Server 安装搭建 FTP 服务 一.安装 Filezilla Server 下载最新版本的 Filezilla Server ...
- 自定义一个全屏的AlertDialog。
........... final MyDialog dialog = new MyDialog(this); LayoutInflater inflater = getLayoutInflater( ...
- FocusListener焦点监听器
[FocusListener焦点监听器] public class Demo extends JFrame { public Demo(){ setDefaultCloseOperation(Wind ...
- mysql的定时器
mysql定时器是系统给提供了event,而oracle里面的定时器是系统给提供的job.废话少说,下面创建表: create table mytable ( id int auto_incremen ...