一般我们在项目开发中使用的表格大多是ui组件库里面的,一般都是一个prop对应一个字符串,但有的时候产品设计需要一个字段下面展示很多的数据,这个时候得做处理了
如下,要求一个表格里面展示很多的人名,后端返回的数据是数组形式的,这个时候需要前端做一下处理,比如给人名之间加一个逗号之类的
我使用的是element table 里面的formatter 具体如下
<div style="width:50vw">
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="date" label="日期" width="180"></el-table-column>
<el-table-column prop="name" label="姓名" width="180"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
<el-table-column prop="person" label="人员2" :formatter="formatData"></el-table-column>
</el-table>
</div>Ï
data() {
return {
tableData: [
{
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
person: ["姐姐", "妹妹", "哥哥"]
},
{
date: "2016-05-04",
name: "王小虎",
address: "上海市普陀区金沙江路 1517 弄",
person: ["姐姐", "妹妹"]
},
{
date: "2016-05-01",
name: "王小虎",
address: "上海市普陀区金沙江路 1519 弄",
person: ["姐姐", "妹妹", "哥哥"]
},
{
date: "2016-05-03",
name: "王小虎",
address: "上海市普陀区金沙江路 1516 弄",
person: ["姐姐", "妹妹"]
}
]
};
},
methods: {
formatData(row) {
let rowPerson = (row && row.person) || [];
let arr = [];
rowPerson.forEach(item => {
//如果数据特别多的话,还可以在这里加if判断,仅展示规定的数据
arr.push(item);
});
//
return arr.join(",");
}
},
如图
这里用的是element table里面提供的格式化的方法 formatter
版权声明:本文为ze1024原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。