對於表格類信息,通常存在后台返回的信息與前端顯示信息的不同.
例如:(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>
