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',width:170},
                    {title:'名稱',type:'name',align:'center',width:170},
                    {title:'類型',type:'type',align:'center',width:170,
                    render:(h,params)=>{
                            //可在此處添加判斷或對數據的相關操作,例如下面操作
                            let typeData = params.row.type;
                            if(typeData == '0'){
                                typeData = '否'
                            }else{
                                typeData = '是'
                            }
                            return h('span',typeData)
                        }
                    },
                    {title:'說明',type:'comment',align:'center',width: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>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM