iView表格内容渲染

问题提出

由于得到的接口数据不一定与最终的数据渲染到前端的样式是相匹配的

表面上在表格中最终显示的是这个学生在组内的角色，但实际上请求接口中存储的值确实0和1，其中1代表队长，0代表队员。还有分数的显示亦是如此，在没有打分的时候，默认值是-1，这样的话我们只要遇到-1就可以在前端显示未公布分数的字样。那么iView表格中如何渲染数据？

问题解决

前往iview官网的表格组件中

可以发现，有render方法支持渲染

我这里就重点介绍我常用的一种渲染方法

代表表格表头的header column数组中指定对象，一般的写法是

data(){ return { header: [ { title: 'titleName',key: 'KeyName',align: 'center'}, ] } }

如果需要特殊渲染

data(){ return { header: [ { title: '队内职务', key: 'isleader', align: 'center', render: (h, params) => { return h("div",params.row.isleader ?'队长':'队员') } }, ] } }

在render:(h,params) =>后的return中，指定最终返回的样式，我是用的是三元式进行判断0或1，是1就返回队长的值，是0就返回队员的值

在iView中render不仅能实现值的渲染，还能够实现样式的渲染，指定相应的style即可

常见使用——时间渲染

往往我们从数据库中取得的时间都是datetime或timestamp格式

这里我们需要先下载一个时间处理插件moment

npm/cnpm i moment -s

Method1：

定义全局过滤器，在vue全局配置main.js中

import moment from 'moment' Vue.filter('dataFormat',function (dataStr, pattern = "YYYY-MM-DD HH:mm:ss") { return moment(dataStr).format(pattern) })

在使用时在使用{{ KeyName }}调用变量时，就可以通过{{ KeyName | dataFormat}}

Method2：

重点还是由于iView表格中是直接指定的属性名，所以没办法使用KeyName|dataFormat的方法进行格式，这里讲iView的表格渲染render使用的方法

在vue中先引入moment

import moment from 'moment'

在表格头数组中的需要的列render中调用moment

{ title: '创建时间', key: 'Time', align: 'center', render: (h, params) => { let time = moment(params.row.Time) .format('YYYY-MM-DD HH:mm:ss') return h('div', time); } },

大功告成！