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>
原文地址:https://www.cnblogs.com/qing0228/p/13821697.html