对于表格类信息,通常存在后台返回的信息与前端显示信息的不同.
例如:(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>