vue数据交互小常识，如何渲染列表数据状态！

在项目中我们会经常遇到渲染表格中会有对应的状态的问题，很多同学都有自己的写法，今天来给大家总结下！

例如：

上图中单据状态对应很多类型，但是后端肯定是传的数值类型，这就需要根据后端定义的值进行渲染了！

接口返回，例：
state：0：制单，1：审核，2：审核通过，3：审核拒绝，4：发布，5：签收

方法一：
data.forEach(v=>{
v.ww5State=this.stateArr[v.ww5State]
})
stateArr: [‘未发运’, ‘发运中’, ‘已收货’,‘作废’,‘待检’,‘已判定’],
data即为接口返回数据list

方法二：

不在接口返回时处理，在表格的插槽中进行转换，我以ant框架的table方式举例，
在这里插入图片描述
项目后期我基本都是以这种方法进行数据渲染，因为会有特殊情况，后端定义的值不一定是按序递增的，所以我大部分都是写这种方法，当然有时候方法一更简洁方便

方法三：
循环判断赋值，这是最麻烦的，不推荐，以方法一为基础，进行数值的判断，如果是有序那就肯定是方法一更简单，如果是有特殊值比如100：作废这样的，和之前0-5的定义不是递增的，那就方法三去进行单独判断，所以这时候就不如方法二更好了

大部分处理返回状态值渲染就是以上总结的三种方法，同学们就各取所需吧！