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库里的多种组件 ...
随机推荐
- day39-Spring 08-Spring的AOP:基于AspectJ的注解
基于AspectJ的注解的开发要重点掌握. 这些表达式肯定要应用在我们的某些个增强上. 学习AspectJ也是两种形式:一种是XML,一种是注解.AspectJ的增强,就是那些通知的类型.Aspect ...
- codevs1839 洞穴勘测
题目描述 Description 辉辉热衷于洞穴勘测.某天,他按照地图来到了一片被标记为JSZX的洞穴群地区.经过初步勘测,辉辉发现这片区域由n个洞穴(分别编号为1到n)以及若干通道组成,并且每条通道 ...
- Kubernetes1.4正式发布
Kubernetes1.4正式发布. 昨天刚预测1.4即将正式发布,结果晚上Kubernetes1.4就正式发布了. 先看看Kubernetes发布历史: Kubernetes 1.0 - 2015年 ...
- hdu1907 尼姆博弈
尼姆博弈的性质. 最后一个取输.若a1^a2^a3...^a4=0表示利他态T,不然为利己态S.充裕堆:1个堆里的个数大于2.T2表示充裕堆大于等于2,T1表示充裕堆大于等于1,T0表示无充裕堆.S2 ...
- 并发编程之submit和execute区别
前言 使用线程池难免会用到submit和execute,但是submit是有坑的,此处做个记录 1.submit坑 此处随便写一个方法,进入内部查看execute和submit /** * @Auth ...
- php 正则学习取反符号~
php 正则学习取反符号~ ~(<a .*?>.*?</a>|<.*?>)~i 先看正则图形,有点偏差,但可以初步看出结果. 关于 ~ 是取反符号,看下面说明.
- TextView.setTextColor(int); 括号里那个颜色int值的理解
原本以为是R.id里的东西,后来发现不是 http://dianhua1990627.blog.163.com/blog/static/2755558820132262150387/
- nodeJs学习-04 POST数据请求,分段发送,分段接收
const http = require("http"); const querystring= require('querystring'); http.createServer ...
- Gym - 101480A_ASCII Addition
题目链接 题解:普通的a+b才怪问题,需要绘制出来,方法有点麻烦. #include <iostream> #include <string.h> #include <s ...
- android service中stub作用是什么?
AIDL(android 接口描述语言)是一个IDL语言,它可以生成一段代码,可以使在一个android设备上运行的两个进程使用内部通信进程进行交互.如果你需要在一个进程中(例如:在一个Activit ...