语法: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()函数的用法的更多相关文章

  1. iview table的render()函数基本的用法

    render:(h,params) => { return h(" 定义的元素 ",{ 元素的性质 }," 元素的内容"/[元素的内容]) }

  2. iview中table的render()函数

    Vue 推荐在绝大多数情况下使用 template 来创建你的 HTML.然而在一些场景中,你真的需要 JavaScript 的完全编程的能力,这就是 render 函数,它比 template 更接 ...

  3. iview table行render渲染不同的组件

    table不同的行,相同的列渲染不同的组件,如图1:第一行渲染selece,第二行渲染input render:(h,params)=>{ if(params.index === 0){ //以 ...

  4. vue iview组件表格 render函数的使用

    如果要在标签中加入属性,例如img 中src属性 a标签中href属性 此时需要用到 attrs 来加入而不是props { title: '操作', key: 'action', align: 'c ...

  5. vue iView table中render渲染

    <template> <div class="srm-page"> <el-form ref="form" :model=&quo ...

  6. iview的render函数使用

    render渲染函数详解 https://www.cnblogs.com/weichen913/p/9676210.html iview表格的render函数作用是自定义渲染当前列,权限高于key,所 ...

  7. iview table表中使用render函数props传值出现问题

    使用iview中的table表格时避免不了使用render函数渲染自定义内容,或者渲染组件.但是在正常使用时出现了props传值无法识别, 按照官网介绍使用props如下: render: (h, p ...

  8. iview table中的render函数使用

    1.表格列数据内容过多可以用以下两个属性解决: ellipsis:"true', tooltip:true 使每个列的内容如果过多的话变为省略号 2.table中的render函数(实现根据 ...

  9. iview使用之怎样通过render函数在table组件表头添加图标及判断多个状态

    在实际项目开发中,我们经常会用到各种各样的表格,比如在表格中填加下拉菜单,按钮,图标及可以根据状态显示对应文字等等,因为这段时间一直在做后台管理系统,所以表格用的就比较多,当然UI组件库我用的是ivi ...

随机推荐

  1. wait与sleep区别?

    wait与sleep区别? 对于sleep()方法,该方法是属于Thread类中的.而wait()方法,则是属于Object类中的. sleep()方法导致了程序暂停执行指定的时间,让出cpu给其他线 ...

  2. PHP 配置多站点多目录

    Apache配置httpd.conf #增加监听端  可以通过netstat -n -a查看端口是否开启# Listen: Allows you to bind Apache to specific ...

  3. React笔记02——React中的组件

    一个网页可以被拆分成若干小部分,每个部分都可以称为组件,即组件是网页中的一部分.组件中还可以有多个组件. 上一节中的App.js就是一个组件(继承了React.Component类的类). 一个组件的 ...

  4. boost Filesystem

    The library Boost.Filesystem makes it easy to work with files and directories. Paths Paths can be bu ...

  5. Vue使用的扩展

    1.Bus(总线)实现非父子组件通信 Vue2.0提供了Vuex进行非父子组件之间的通信,但在简单的场景下,可以使用一个空的Vue实例作为中央事件总线. 实现代码示例: <div id=&quo ...

  6. 用闭包解决 js 循环中函数变量暂存问题

    需求:有一个数组,根据数组的值渲染对应的数字div,单击对应的div 在控制台打印对应的数字.如点击1,控制台打印1. 问题: 不管点击哪个值 打出来都是4 代码如下 <!DOCTYPE htm ...

  7. Unity编程标准导引-3.4 Unity中的对象池

    本文为博主原创文章,欢迎转载.请保留博主链接http://blog.csdn.net/andrewfan Unity编程标准导引-3.4 Unity中的对象池 本节通过一个简单的射击子弹的示例来介绍T ...

  8. Qt/Qte/Qtopia三者的区别

    Qt泛指 Qt software的所有版本的图像界面库,包括 Qt/X11(Unix/Linux),Qt Windows, Qt Mac 等,但这只是相对于二进制来说的.Qt作为一个跨平台的GUI 框 ...

  9. bzoj 1026: [SCOI2009]windy数 & 数位DP算法笔记

    数位DP入门题之一 也是我所做的第一道数位DP题目 (其实很久以前就遇到过 感觉实现太难没写) 数位DP题目貌似多半是问从L到R内有多少个数满足某些限制条件 只要出题人不刻意去卡多一个$log$什么的 ...

  10. SoftDevice Specification v1.2

    S110 SoftDevice是蓝牙®低功耗(BLE)外设协议栈的解决方案.它集成了一个低 能量控制器和主机,并为建设蓝牙低功耗系统全面且灵活的API 芯片(SoC)解决方案. 本文件包含SoftDe ...