一般我们在项目开发中使用的表格大多是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

element 文档