zoukankan      html  css  js  c++  java
  • 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)
      }
      }
    ]
  • 相关阅读:
    Kubernetes基础:Pod的详细介绍
    十分钟带你理解Kubernetes核心概念
    kubectl命令行工具用法详解
    GDPR给安全的影响
    开源软件会被云杀死吗 ?
    VMware前路难测,多个厂家群雄逐鹿
    如何实现linux+windows双系统启动
    IT行业——Linux
    i3 窗口管理器使 Linux 更美好
    在 Linux 中使用超级用户权限
  • 原文地址:https://www.cnblogs.com/fashe8888/p/11176872.html
Copyright © 2011-2022 走看看