iview render函数(vue render函数)

news/2024/12/5 5:06:58/

iview 的render函数就是vue的render函数,iview常用在表格里面自定义内容,下面来看render函数常用的配置:

  • 1、 h是createdElement的简写,有3个参数:
    语法:render:(h,params)=>{}
render:(h,params) => {return h(" 定义的元素 "{ 元素的性质 }" 元素的内容"/[元素的内容])
}
  • h的第三个参数支持数组的形式,数组里面可以是多个h渲染出来的元素对象或字符串 *

h("元素名称或组件名称", {domProps: { // 原生dom元素的一些属性value: 1,type: 'number',min: 1,innerHTML:’‘},props:{ // 传给组件数据 比喻iview  Button的type,size 等等type:'text',size:'small'}class:{ // 类btn:true// }attrs:{ // html属性,classid:'box'class:'brn2'}style:{ // 内联样式},slot:'slotName', // 组件的插槽on:{ // 事件 包括组件的自定义事件click:()=>{},'on-change':()=>{},}nativeOn:{ // 类似vue的.native修饰符,自定义组件常用click:()=>{}}},'文本啊啊啊')  
    1. 用法包括:
      2.1 、 当定义的元素没有其他元素时:
render:(h,params)=>{return h('div', {style:{width:'100px',height:'100px',background:'#ccc'}}, '地方')
}

图片: Alt
2.2. 当定义的元素中要嵌套其他元素时:

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')])])
}

2.3. 元素如何绑定事件:

on: {click: () => {console.log('ffff')},mouseover:() => { console.log('bbb')}}

2.4. 如何根据后台的数据判断是否显示某些元素:

{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 ""} //未上线时不显示}
}

http://www.ppmy.cn/news/50764.html

相关文章

DRM驱动

vop: video output processor,rk平台的LCD controllers crt: crt显示器, crtc: crt显示控制器,等同于lcdc、vop drivers\gpu\drm\rockchip\rockchip_drm_drv.c: drm驱动入口。 display_subsystem: display-subsystem {…

基于蛋白-配体复合物药效团药物设计(Pharmacophore)

基于蛋白-配体复合物药效团药物设计(Pharmacophore) step 1.蛋白-配体复合物准备 点击File-->Import Structures导入之前已经下载好的1IEP.pdb(Abl蛋白和Imatinib的晶体复合物) 蛋白准备:点击Tasks--->Protei…

Praat脚本-037 | 批量把标注TextGrid生成韵律文本

目录 引题方案一方案二方案三获取脚本关注版权说明 引题 Praat是一种非常出色、轻便、开源免费的标注工具,它的最主要用途是标注,即对语音信号中的一些特征、信息进行标注,保存为TextGrid文件,这个TextGrid文件实质 上就是一种文…

OSCP-Hutch(ldap)

扫描 sudo nmap 192.168.89.122 -p- -sV -sS PORT STATE SERVICE VERSION 53/tcp open domain Simple DNS Plus 80/tcp open http Microsoft IIS httpd 10.0 88/tcp open kerberos-sec Microsoft Windows Kerberos (server time:…

4.2.2字符串KMP算法

对朴素模式匹配算法的优化: 当我们匹配最后一个字符才发现匹配失败。 那么前面这些字符一定是与模式串对应的。 通过模式串的部分匹配 朴素模式匹配算法优化思路: 不匹配的字符之前,一定是和模式串一致的。 可以跳过中间好几个没有必要的对比…

玄武科技面试题

一、 数据结构 给你1~100个数,你会用什么方法去找出一个数字?(树,二分,希尔,暴力,冒泡)树的作用是什么?为业务上的树形结构建模,多级菜单&#x…

Tailwind CSS入门(二)——基本介绍和特性

上一篇文章简要的介绍了原子类CSS,以及个人对语义化、原子化的一些经验和理解。从这篇文章开始,正式开始分享Tailwind CSS的特性、使用和技巧。 Tailwind CSS是一个为快速开发而精心设计的原子类CSS框架,在此我们将搭建一个Vite项目来配合讲…

一些离谱的化学方程式

一些离谱的化学方程式 最近了解了一些比较离谱的化学方程式。特别是最后两个,绝对能够燃起你对化学的激情。希望能够对大家的学习有所帮助。 无奈水博 基础班 Ba2NaBanana 工业制香蕉 2Mg2NaO₂=2Mango 工业制芒果 CO+2Fe=Co…