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函数使用的更多相关文章

  1. iview table表中使用render函数props传值出现问题

    使用iview中的table表格时避免不了使用render函数渲染自定义内容,或者渲染组件.但是在正常使用时出现了props传值无法识别, 按照官网介绍使用props如下: render: (h, p ...

  2. vue中的render函数介绍

    简介:对于不了解slot的用法(参考:大白话vue-slot的用法)又刚接触render函数的同学来说,官网的解释无疑一脸懵逼,这里就整理下个人对render函数的理解 问题: 1.render函数是 ...

  3. Vue2.x中的Render函数

    Render函数是Vue2.x版本新增的一个函数:使用虚拟dom来渲染节点提升性能,因为它是基于JavaScript计算.通过使用createElement(h)来创建dom节点.createElem ...

  4. Vue中的render函数随笔

    使用vue-cli创建项目后,再main.js里面有这样一段代码: new Vue({ render:h => h(App) }).$mount('#app') render函数是渲染一个视图, ...

  5. vue iView table中render渲染

    <template> <div class="srm-page"> <el-form ref="form" :model=&quo ...

  6. 在vue中结合render函数渲染指定的组件到容器中

    1.demo 项目结构: index.html <!DOCTYPE html> <html> <head> <title>标题</title> ...

  7. iview table中使用Poptip

    h('Poptip', { props: { confirm: true, // 'ok-text':"yes", // 'cancel-text':"no", ...

  8. iview中table的render()函数

    Vue 推荐在绝大多数情况下使用 template 来创建你的 HTML.然而在一些场景中,你真的需要 JavaScript 的完全编程的能力,这就是 render 函数,它比 template 更接 ...

  9. iview使用之怎样通过render函数在tabs组件中添加标签

    在实际项目开发中我们通常会遇到一些比较'新颖'的需求,而这时iview库里往往没有现成可用的组件示例,所以我们就需要自己动手翻阅IviewAPI进行自定义一些组件,也可以说是将iview库里的多种组件 ...

随机推荐

  1. 2019-8-30-C#-从零开始写-SharpDx-应用-笔刷

    title author date CreateTime categories C# 从零开始写 SharpDx 应用 笔刷 lindexi 2019-8-30 8:50:0 +0800 2019-6 ...

  2. 【记录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 ...

  3. PHPCMS快速建站系列之标签调用出错

    {pc:content action="position" posid="24" order="listorder ASC" thumb=& ...

  4. Python学习之路1☞简介及入门代码

    在学习之前,首先了解一下python的前世今生 一.python简介与发展: python 是一种面向对象的解释性计算机程序设计语言. python由荷兰人Guido van Rossum 于1989 ...

  5. HZOJ 导弹袭击

    比较显然的一个性质是如果存在$a(i)>=a(j) \& \& b(i)>=b(j)$那么j没用. 我们并不需要A,B的具体取值,我们之关心$\frac {A}{B}$. ...

  6. css3 练习

    css3 文本效果 css3中包含几个新的文本特征 在本章中您将了解一下文本属性 text-shadow box-shadow word-wrap word-break css3 的文本阴影 css3 ...

  7. iOS 设计 用户为王 - 关于征询授权、注册及加载等待的体验优化

    你要做的东西一定要是你无比渴望这世界上能出现的东西,这股热情和能量将会融入到你的应用中,成为它腾飞的初速度,为你带来积极反馈.把自己当做app最重要的用户,这一点非常重要. http://www.co ...

  8. TensorFlow 池化层

    在 TensorFlow 中使用池化层 在下面的练习中,你需要设定池化层的大小,strides,以及相应的 padding.你可以参考 tf.nn.max_pool().Padding 与卷积 pad ...

  9. HZOJ 走格子

    作者的正解: 对于100%的数据:行动可以分为两种: 1. 步行,花费一个单位的时间移动到4联通的相邻格子中去. 2. 使用传送门,指定一个方向的墙的前面的一个格子,步行至最近的一个墙的面前,使用传送 ...

  10. poj 1039 Pipe (Geometry)

    1039 -- Pipe 理解错题意一个晚上._(:з」∠)_ 题意很容易看懂,就是要求你求出从外面射进一根管子的射线,最远可以射到哪里. 正解的做法是,选择上点和下点各一个,然后对于每个折点位置竖直 ...