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库里的多种组件 ...
随机推荐
- Apache Camel继承Spring Boot 实现文件远程复制和转移
pom.xml <dependency> <groupId>org.apache.camel</groupId> <artifactId>camel-f ...
- 封装好的PDO类
封装PDO类,方便使用: <?php header('content-type:text/html;charset=utf-8'); /** * 封装PDODB类 */ // 加载接口 // i ...
- kendo grid 使用小结
需要注意的: 1. id,如果没有指定id则会导致create.update等操作无法正常使用. 头疼事项: 1. 服务端失败返回error数据.如果是编辑状态,还不能友好提示错误.当然可以使用大量代 ...
- 开发一个登录接口(Mysql)
分享一段代码,开发了一个登录接口: 使用Python开发,需要安装flask模块,使用pip intall flask 安装即可,这里使用的数据库是Mysql,所以导入了pymysql模块,代码如下: ...
- QT_OPENGL-------- 3.ElementArraryBuffer
与上一节内容基本相同,只是用ElementArraryBuffer绘制三角形,也就是VBO与IBO. 1.VBO 一系列点,通过glDrawArrays指定绘制几个点,是连续的,不能跳跃.2.IBO( ...
- Arthas用法
简介 Arthas 是Alibaba开源的Java诊断工具,深受开发者喜爱. 当你遇到以下类似问题而束手无策时,Arthas可以帮助你解决: 这个类从哪个 jar 包加载的? 为什么会报各种类相关的 ...
- 13条必知必会&&测试
1.13条必知必会 <> all(): 查询所有结果 <> filter(**kwargs): 它包含了与所给筛选条件相匹配的对象 <> get(**kwargs) ...
- SP2-0642: SQL*Plus internal error state 2130, context 0:0:0
..experience, Working case SP2-0642: SQL*Plus internal error state 2130, context 0:0:0 2016-10-09 没有 ...
- KiCad Mark 点名称
KiCad Mark 点名称 Mark 点的用处是给 IC 等高密度的元件在贴片时定位参考.
- H3C 命令级别