拿到 json字符串 的处理渲染

从接口拿到 json字符串数据（格式为[{"unitId":"xxx","unitName":"xxx"}]），要循环渲染其中的 unitName 并且用英文逗号隔开。

效果图如下：

解决思路：因为在HTML结构中渲染会很麻烦，所以我们在拿到数据的时候就处理，然后渲染。

代码如下：

// 获取数据
getList() {
  getMaterialList(this.listQuery)                //接口
    .then((response) => {
      this.list = response.data.list.map((v) => {    //利用map循环出数据
        let units = [];                              //先创建一个空数组 units=[]
        JSON.parse(v.reportTarget).map((i) => {   //reportTarget将数据变为JS对象然后遍历
          units.push(i.unitName);       //将reportTarget中的unitName拿出存到 units中
        });
        return {		//替代下两行
          ...v,         //把v中所有数据都拿出来
          units: units.join(","),    //返回 units，数据用英文逗号隔开
        };
      });
      this.total = response.data.total;
      this.listLoading = false;
    })
    .catch((err) => {
      console.log(err);
      this.listLoading = false;
    });
},


//渲染数据
<el-table-column prop="units" label="上报对象" />