iview table的render()函数的用法
语法:render:(h,params)=>{}
render:(h,params) => {
return h(" 定义的元素 ",{ 元素的性质 }," 元素的内容"/[元素的内容])
}
当定义的元素没有其他元素时:
render:(h,params)=>{
return h('div', {style:{width:'100px',height:'100px',background:'#ccc'}}, '地方')
}
当定义的元素中要嵌套其他元素时:
render:(h,params)=>{
return h('div',{style:{width:'100px',height:'100px',background:'#ccc'}},[h('p','内容2')],'内容1')
}
我们可以嵌套3层元素来完成,来看看第一二层元素的嵌套:
render:(h, params) => {
return h('div',[
h('div',{style:{float:'left',width:'50px',height:'50px',background:'#ccc'}},[h('p','内容2')]),
h('div',{style:{float:'left',width:'50px',height:'50px',background:'#fc1'}},[h('p','内容2')])
])
}
元素如何绑定事件:
on: {
click: () => {console.log('ffff')},
mouseover:() => { console.log('bbb')}
}
如何根据后台的数据判断是否显示某些元素:
{
title: '操作',
align:'center',
width:130,
render:(h, params) => {
let status = params.row.Status; //0:空闲 1:游戏 2:未上线
if (status===0){ return h('Button','空闲中') };
if (status===1){ return h('Button','游戏中')};
if (status===2){ return ""} //未上线时不显示}
}
原文:https://www.jianshu.com/p/f44a32f83cc8
iview table的render()函数的用法的更多相关文章
- iview table的render()函数基本的用法
render:(h,params) => { return h(" 定义的元素 ",{ 元素的性质 }," 元素的内容"/[元素的内容]) }
- iview中table的render()函数
Vue 推荐在绝大多数情况下使用 template 来创建你的 HTML.然而在一些场景中,你真的需要 JavaScript 的完全编程的能力,这就是 render 函数,它比 template 更接 ...
- iview table行render渲染不同的组件
table不同的行,相同的列渲染不同的组件,如图1:第一行渲染selece,第二行渲染input render:(h,params)=>{ if(params.index === 0){ //以 ...
- vue iview组件表格 render函数的使用
如果要在标签中加入属性,例如img 中src属性 a标签中href属性 此时需要用到 attrs 来加入而不是props { title: '操作', key: 'action', align: 'c ...
- vue iView table中render渲染
<template> <div class="srm-page"> <el-form ref="form" :model=&quo ...
- iview的render函数使用
render渲染函数详解 https://www.cnblogs.com/weichen913/p/9676210.html iview表格的render函数作用是自定义渲染当前列,权限高于key,所 ...
- iview table表中使用render函数props传值出现问题
使用iview中的table表格时避免不了使用render函数渲染自定义内容,或者渲染组件.但是在正常使用时出现了props传值无法识别, 按照官网介绍使用props如下: render: (h, p ...
- iview table中的render函数使用
1.表格列数据内容过多可以用以下两个属性解决: ellipsis:"true', tooltip:true 使每个列的内容如果过多的话变为省略号 2.table中的render函数(实现根据 ...
- iview使用之怎样通过render函数在table组件表头添加图标及判断多个状态
在实际项目开发中,我们经常会用到各种各样的表格,比如在表格中填加下拉菜单,按钮,图标及可以根据状态显示对应文字等等,因为这段时间一直在做后台管理系统,所以表格用的就比较多,当然UI组件库我用的是ivi ...
随机推荐
- Es学习第十课,ElasticSearch集群搭建
前面几课我们已经把ES的基本概念和查询了解了,大家知道ES的核心优势就是天生支持分布式,所以,这课我们专门讲讲怎么搭建实现ES的集群部署. ES分布式原理 1.es分布式概念 主分片(Primary ...
- Java字符串流学习
字符串流 定义:字符串流,以一个字符为数据源,来构造一个字符流. 作用:在Web开发中,我们经常要从服务器上获取数据,数据返回的格式通过一个字符串(XML.JSON),我们需要把这个字符串构造为一个字 ...
- hive中为分区表增加字段需要注意默认不会修改已有分区的字段,导致查询时新增字段为null
若向hive表添加字段,通常会使用下面这种语句 alter table default.testparquet add columns(c8 string); 但是对于分区表来说, 1. 若新建的分区 ...
- mobx学习笔记03——mobx基础语法(decorator修饰器)
在声明阶段实现类与类成员注解的一种语法. function log(target){ const desc = Object.getOwnPropertyDescriotors(target.prot ...
- Echarts和Highcharts学习笔记01——入门了解
Echarts是国内百度团队开发的(开源),基于Canvas,适合数据量较大的情况: Highcharts是国外的(商用需授权),基于SVG,方便自己定制,但能使用的图表类型有限: Echarts ...
- Redis事件通知示例
1. redis如同zk一样,提供了事件监听(或者说是回调机制), 下面是redis的配置说明: ############################# EVENT NOTIFICATION ## ...
- KVM(多电脑切换器)
KVM:Keyboard Video Mouse的缩写.KVM 交换机通过直接连接键盘.视频和鼠标 (KVM) 端口,让您能够访问和控制计算机.KVM 技术无需目标服务器修改软件.这就意味着可以在 W ...
- Outlets
Outlets Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Sub ...
- Mac上VMWare Fusion配置多台cent os
一.创建虚拟机(准备工作) 1.使用VMWare Fusion 创建第一台虚拟机 2.选择操作系统(本次使用的是使用cent os 6.5 64bit 系统) 3.选择磁盘大小(楼主mac上的磁盘大小 ...
- Chrome-谷歌页面翻译增强插件开发
最近想做一个 Chrome 的插件(看别的博客说其实叫插件不准确,应该叫拓展,大家叫习惯了就按习惯的来吧).一开始咱先直接看了[Chrome 开发(360 翻译)](http://open.chrom ...