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>
  • 相关阅读:
    堆内存和栈内存
    链表
    爬虫---正则表达式
    剑指offer---二维数组中的查找
    基于C#开发的俄罗斯方块
    Java第十天
    软考错题合集之11-05-AM
    软考错题合集之11-11-AM
    软考错题合集之12-05-AM
    GOF之模板模式
  • 原文地址:https://www.cnblogs.com/qing0228/p/13821697.html
Copyright © 2011-2022 走看看