zoukankan      html  css  js  c++  java
  • vue+iview如何通过render对table中的数据进行相关操作1、通过render对table中的数据进行相关操作

      对于表格类信息,通常存在后台返回的信息与前端显示信息的不同.
    例如:(1)状态存在"运行"和"停止"两种形式,但是后台返回的为"0"和"1";(2)后台返回的时间展示形式与前端需要展示的形式不同,需要进行相关修改。
      为解决这一问题,我们将通过render对数据格式进行修改:

    <template>
        <div>
            <Table :data="tableData" :columns="tableColumns"></Table>
        </div>
    </template>
    
    <script>
        import ...  
        
        export default{
            name:'vuefilename',
            data(){
                return{
                    tableColumns:[
                        {title:'IP',type:'ip',align:'center',170},
                        {title:'名称',type:'name',align:'center',170},
                        {title:'类型',type:'type',align:'center',170,
                        render:(h,params)=>{
                                //可在此处添加判断或对数据的相关操作,例如下面操作
                                let typeData = params.row.type;
                                if(typeData == '0'){
                                    typeData = '否'
                                }else{
                                    typeData = '是'
                                }
                                return h('span',typeData)
                            }
                        },
                        {title:'说明',type:'comment',align:'center',170}
                    ],
                    tableData:[{"ip":"1111","name":"名称1","type":"1","comment":"说明1"},
                        {"ip":"1111","name":"名称1","type":"0","comment":"说明1"},
                        {"ip":"1111","name":"名称1","type":"1","comment":"说明1"},
                        {"ip":"1111","name":"名称1","type":"1","comment":"说明1"}
                    ]
                }
            }
        }
    </script>
  • 相关阅读:
    [每日一题]石子合并 -- 区间DP
    [每日一题]: 最长上升子序列 AND 最长不上升子序列
    [每日一题]:最大子矩阵和
    入门DP--最大子段和
    [转载]:正确的提问方式
    springmvc.xml
    service层springservice.xml文件
    aop切面配置
    配置事务通知
    短信验证
  • 原文地址:https://www.cnblogs.com/qing0228/p/13821697.html
Copyright © 2011-2022 走看看