语法: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. JavaWeb(三):JSP

    JSP是JavaServer Page的缩写,也就是服务端网页. 一.概述 1.1 为什么使用JSP 在很多动态网页中,绝大部分内容都是固定不变的,只有局部内容需要动态产生和改变.JSP是简化Serv ...

  2. C# json对象中包含数组对象时,如何存入数据库

    前端创建的的对象例如: C#端这样将数组提取出来存入

  3. 启动kafka集群,关闭kafka集群脚本

    启动kafka集群,关闭kafka集群脚本 在$KAFKA_HOME/bin下新建如下脚本文件 start-kafka.sh #!/bin/bash BROKERS="mini41 mini ...

  4. [CSP-S模拟测试]:字符消除2(hash+KMP)

    题目背景 生牛哥终于打通了“字符消除”,可是他又被它的续集难倒了. 题目传送门(内部题52) 输入格式 第一行$n$表示数据组书.接下来每行一个字符串.(只包含大写字母) 输出格式 每组数据输出一个$ ...

  5. python中常用得字符串,列表函数汇总

    字符串函数: 1,replace函数,替换函数.s = s.replace(old,new),老得元素被新的元素替换.注意不能直接写s.replace(old,new).要写s=s.replace(o ...

  6. python练习题之计算字符串中所有字符得和

    第二题:计算字符串中所有数字的和1.字符串中只有小写字母和数字2.数字可能连续,也可能不连续3.连续数字要当做一个数处s='1234adg3g11's1 = "" for i in ...

  7. 2019-2020-1 20175223 《信息安全系统设计基础》MyOD

    目录 一.要求 二.设计流程 1. 需求分析 2. 概要设计 伪代码 3. 详细设计 main.c tans_0x.c tans_pr.c tansp.h 三.编写Makefile,并制作动.静态库 ...

  8. 【刷题笔记】LeetCode 48. Rotate Image

    题意 原地顺时针翻转一个 n*n 的矩阵 图解 下面例子中用 5*5 矩阵做示例,如下图,我们要把该矩阵顺时针翻转90度,并且不能使用另外的矩阵空间来暂存数据,而是原地改变矩阵中数值. 我的想法是这样 ...

  9. git使用记录三:查看日志

    git使用记录三: git log git log 的帮助文档 git log --help 查看最后面的两个日志记录 命令如下: git log -n number 比如: git log -n 2 ...

  10. docker 提示 Drive has not been shared 错误

    Creating laradock_docker-in-docker_1 ... Creating laradock_docker-in-docker_1 ... error ERROR: for l ...