Vue+Element ui表格行中的数据是数组的解决方案

Vue+Element ui表格行中的数据是数组的解决方案

一、问题情境

后端返回的specification.color和specification.size都是数组

1.这是我最初的渲染方式

2.这是渲染的效果，以及后端的数据格式

按照以上方法渲染，所有的数据全部都成为一串了，颜色还好，有#是分隔的标识，但是尺码的话，完全无法辨识其值 到底是12 ，还是1和2

二、解决方案

使用Element ui提供的formatter方法对数据进行格式化处理

1.这是我改进之后的渲染方式

<el-table :data="tableData" border class="table" header-cell-class-name="table-header">
                ...
                <el-table-column prop="specification.color" :formatter="colorData" width="140" label="商品颜色" sortable>el-table-column>
                <el-table-column prop="specification.size" :formatter="sizeData" width="140" label="商品尺寸" sortable>el-table-column> 
                ...
            el-table>

2.这是formatter函数的内容

...
methods:{
		// 颜色数组的分隔处理
        colorData(row) {
            let colorArr = []; //新建一个数组
            row.specification.color.forEach((item, index) => { 
            //对当前的颜色数组进行遍历处理
                colorArr.push(item + '; '); //给它们每一项加上分号和空格
            });
            return colorArr; //将有分隔符的颜色数组返回
        },
        // 尺寸数组的分隔处理
        sizeData(row) {
            let sizeArr = [];
            row.specification.size.forEach((item, index) => {
                sizeArr.push(item + '; ');
            });
            return sizeArr;
        }
} 
...       

3.这是有分隔符之后的渲染效果

这样就能很清晰的辨识 商品尺寸分为 1和2两种