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库里的多种组件 ...
随机推荐
- 2019-8-30-C#-从零开始写-SharpDx-应用-笔刷
title author date CreateTime categories C# 从零开始写 SharpDx 应用 笔刷 lindexi 2019-8-30 8:50:0 +0800 2019-6 ...
- 【记录Bug】 This is probably not a problem with npm. There is likely additional logging output above.
一个eslint的错误 我的报错如下 $ npm install > node-sass@4.11.0 install C:\Users\Administrator\Desktop\forGit ...
- PHPCMS快速建站系列之标签调用出错
{pc:content action="position" posid="24" order="listorder ASC" thumb=& ...
- Python学习之路1☞简介及入门代码
在学习之前,首先了解一下python的前世今生 一.python简介与发展: python 是一种面向对象的解释性计算机程序设计语言. python由荷兰人Guido van Rossum 于1989 ...
- HZOJ 导弹袭击
比较显然的一个性质是如果存在$a(i)>=a(j) \& \& b(i)>=b(j)$那么j没用. 我们并不需要A,B的具体取值,我们之关心$\frac {A}{B}$. ...
- css3 练习
css3 文本效果 css3中包含几个新的文本特征 在本章中您将了解一下文本属性 text-shadow box-shadow word-wrap word-break css3 的文本阴影 css3 ...
- iOS 设计 用户为王 - 关于征询授权、注册及加载等待的体验优化
你要做的东西一定要是你无比渴望这世界上能出现的东西,这股热情和能量将会融入到你的应用中,成为它腾飞的初速度,为你带来积极反馈.把自己当做app最重要的用户,这一点非常重要. http://www.co ...
- TensorFlow 池化层
在 TensorFlow 中使用池化层 在下面的练习中,你需要设定池化层的大小,strides,以及相应的 padding.你可以参考 tf.nn.max_pool().Padding 与卷积 pad ...
- HZOJ 走格子
作者的正解: 对于100%的数据:行动可以分为两种: 1. 步行,花费一个单位的时间移动到4联通的相邻格子中去. 2. 使用传送门,指定一个方向的墙的前面的一个格子,步行至最近的一个墙的面前,使用传送 ...
- poj 1039 Pipe (Geometry)
1039 -- Pipe 理解错题意一个晚上._(:з」∠)_ 题意很容易看懂,就是要求你求出从外面射进一根管子的射线,最远可以射到哪里. 正解的做法是,选择上点和下点各一个,然后对于每个折点位置竖直 ...