接口拿到 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="上报对象" />   

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注