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. orm1.0

    class Field: def __init__(self,name,column_type,primary_key,defaule): self.name = name self.column_t ...

  2. Java中的四种引用(强引用、软引用、弱引用、虚引用)

    以下内容摘自<深入理解Java虚拟机 JVM高级特性与最佳实践>第2版,强烈推荐没有看过的同学阅读,读完的感觉就是"原来学的都是些什么瘠薄东西(╯‵□′)╯︵┴─┴" ...

  3. Best Time to Sell and Buy Stock

    这道题想了很多,但是想多了.这个题思路很简单,如果当前值大于最小值,就计算差,和最大利润值比较. class Solution { public: int maxProfit(vector<in ...

  4. (六)IO流之过滤流

    过滤字节流FilterInputStream和FilterOutputStream BufferedInputStream和BufferedOutputStream    需要使用已存在的节点流来构造 ...

  5. 【Leetcode链表】旋转链表(61)

    题目 给定一个链表,旋转链表,将链表每个节点向右移动 k 个位置,其中 k 是非负数. 示例 1: 输入: 1->2->3->4->5->NULL, k = 2 输出: ...

  6. [React Native]获取网络状态

    使用React Native,可以使用NetInfo API获取手机当前的各个网络状态. componentWillMount() { NetInfo.fetch().done((status)=&g ...

  7. poj 2184 01背包变形【背包dp】

    POJ 2184 Cow Exhibition Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 14657   Accepte ...

  8. 巨蟒python全栈开发-第11阶段 ansible3_2入门八个模块

    大纲: 1.file模块 2.fetch模块 3.yum&&pip模块 4.service模块 5.cron模块 6.user模块 7.group模块

  9. Charles配置信息

    1.下载Charles https://www.charlesproxy.com/download/ 2.破解 https://www.zzzmode.com/mytools/charles/ 或者 ...

  10. POJ-3615_Cow Hurdles

    Cow Hurdles Time Limit: 1000MS Memory Limit: 65536K Description Farmer John wants the cows to prepar ...