iview table中的render函数使用
1.表格列数据内容过多可以用以下两个属性解决:
ellipsis:"true',
tooltip:true
使每个列的内容如果过多的话变为省略号
2.table中的render函数(实现根据表格内容条件是否展示按钮)
columns:[
{
title:'审批状态',
key:'status',
render:(h,params)=>{
const status = params.row.status;
var text = ''
switch(status){
case 100:
text = '待审核',
break;
case 200:
text = '审核未通过'
break;
case 300:
text = '审核通过'
break;
}
return h('div',text)
}
},
{
title:'操作',
key:"oprator",
render:(h,params)=>{
let arr = []
if(params.row.status === '100'){
arr.push(
h(
"Button",
{
props:{
type:"warning",
size:"small",
icon:"md-create"
},
style:{
marginRight:"5px"
},
on:{
lick:()=>{
this.applyDetail(params.row.demandId);
}
}
},
"申请详情"
)
)
}
return h('div',arr)
}
}
]
iview table中的render函数使用的更多相关文章
- iview table表中使用render函数props传值出现问题
使用iview中的table表格时避免不了使用render函数渲染自定义内容,或者渲染组件.但是在正常使用时出现了props传值无法识别, 按照官网介绍使用props如下: render: (h, p ...
- vue中的render函数介绍
简介:对于不了解slot的用法(参考:大白话vue-slot的用法)又刚接触render函数的同学来说,官网的解释无疑一脸懵逼,这里就整理下个人对render函数的理解 问题: 1.render函数是 ...
- Vue2.x中的Render函数
Render函数是Vue2.x版本新增的一个函数:使用虚拟dom来渲染节点提升性能,因为它是基于JavaScript计算.通过使用createElement(h)来创建dom节点.createElem ...
- Vue中的render函数随笔
使用vue-cli创建项目后,再main.js里面有这样一段代码: new Vue({ render:h => h(App) }).$mount('#app') render函数是渲染一个视图, ...
- vue iView table中render渲染
<template> <div class="srm-page"> <el-form ref="form" :model=&quo ...
- 在vue中结合render函数渲染指定的组件到容器中
1.demo 项目结构: index.html <!DOCTYPE html> <html> <head> <title>标题</title> ...
- iview table中使用Poptip
h('Poptip', { props: { confirm: true, // 'ok-text':"yes", // 'cancel-text':"no", ...
- iview中table的render()函数
Vue 推荐在绝大多数情况下使用 template 来创建你的 HTML.然而在一些场景中,你真的需要 JavaScript 的完全编程的能力,这就是 render 函数,它比 template 更接 ...
- iview使用之怎样通过render函数在tabs组件中添加标签
在实际项目开发中我们通常会遇到一些比较'新颖'的需求,而这时iview库里往往没有现成可用的组件示例,所以我们就需要自己动手翻阅IviewAPI进行自定义一些组件,也可以说是将iview库里的多种组件 ...
随机推荐
- 两种RBAC权限控制模型详解
序言 由于最近一直卡在权限控制这个坎上,原来设计的比较简单的权限控制思路已经无法满足比较复杂一些的场景,因此一直在探索一种在大部分场景下比较通用的权限模型. 首先,这里说明一下两种RBAC权限模型分别 ...
- Intellij IDEA设置忽略部分类编译错误
有些时候我们的项目中有些错误,但这些错误并不影响项目的整体运行(或许是没有使用到),默认情况下idea是无法通过编译的,因此也就无法部署运行,要达到正确运行项目的目的需要作一些设置才行. 设置Inte ...
- oracle-ORA-01567错误
删除日志4时将在线索1中保留少于两个日志文件
- Otracle数据库定时任务--dbms_job
一.dbms_job涉及到的知识点 1.创建job: variable jobno number; dbms_job.submit(:jobno, --job号 'your_procedure;'-- ...
- docker-其它命令
[root@iZ943kh74qgZ soft]# docker Usage: docker COMMAND A self-sufficient runtime for containers Opti ...
- 【NS2】新协议的添加示例(转载)
1. 下表显示了 NS2 和 TCP/IP.OSI七层网络结构的大致对应关系(这个表很有好处哦) TCP NS2 OSI 应用层 应用层 应用层 表示层 会话 ...
- 容器化ICT融合初体验
[编者的话]本次将分享的容器化ICT融合平台是一种面向未来ICT系统的新型云计算PaaS平台,它基于容器这一轻量级的虚拟化技术以及自动化的"微服务"管理架构,能够有效支撑应用快速上 ...
- Python中并发前戏之操作系统
进程: 1.串行: 一个任务完完整整地运行完毕后,才能运行下一个任务 2.并发 看起来多个任务是同时运行的即可,单核也可以实现并发 3.并行: 真正意义上多个任务的同时运行,只有多核才实现并行 1.什 ...
- 括号序列问题 uva 1626 poj 1141【区间dp】
首先考虑下面的问题:Code[VS] 3657 我们用以下规则定义一个合法的括号序列: (1)空序列是合法的 (2)假如S是一个合法的序列,则 (S) 和[S]都是合法的 (3)假如A 和 B 都是合 ...
- intellij idea怎么设置java帮助文档
打开idea我引用的jar包都放在 Project Structure-->Modules-->libs文件夹(双击) 双击jar包所在文件夹,跳出对话框. 1.如果api对应的javad ...