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)
      }
      }
    ]
  • 相关阅读:
    HDU 4268 multiset
    ACM-线段树
    HDU 5014 异或之和
    HDU 5012 骰子旋转(DFS)
    HDU 5011 NIM博弈
    HDU 5007 字符串匹配
    Android-Context
    Android-视图绘制
    Android-LayoutInflater
    oracle--分页过程demo1
  • 原文地址:https://www.cnblogs.com/fashe8888/p/11176872.html
Copyright © 2011-2022 走看看