1. 需求
后端接口给的数据有个状态给的是[0,1,2,3],在前端渲染的时候,要对其进行相应处理,显示的是文字。
2. 问题
项目开发使用了iview 框架的 i-table组件,数据渲染都是组件自动进行的,很难对单个单元格进行处理。
3. 解决方案
使用 render
看一下解决方案代码吧
template
<template>
<i-table border :columns="columns1" :data="data1" @on-row-click='openLibraryContactDetail'></i-table>
</template>
data
data () {
return {
columns1: [
{
title: 'ISBN',
key: 'ISBN'
},
{
title: '上架状态',
key: 'TotalQty',
align: 'center',
render: (h, params) => {
return h('div', [
h('span', {
style: {
color: 'red'
}
}, params.row.ShelfOn = '0'?'未上架':'已上架'),
])
}
},
}
params.row.ShelfOn = ''?'未上架':'已上架'
三元表达式