iview table列表加塞2列数据

table表格里面的某列数据时从其他接口取出来的。

 

列如：

分区这列数据时不是table列表的 :data="historyData" 里面返回的，需要前面在赋值列表值前，赛到 this.historyData 里面；

下面是主要代码的逻辑：

    for(let i=0; i<result.length; i++){
        // let names = [];
        let idArry = result[i].areaIdList.split(',');
        for(let j=0; j<this.areaIdALLData.length; j++){
            idArry.map(v=>{
                if( v == this.areaIdALLData[j].id){
                    // names.push(this.areaIdALLData[j].name)
                    result[i].areaName += this.areaIdALLData[j].name + ','
                }
            })
            //  result[i].areaName = String(names);
        } 
         result[i].areaName = result[i].areaName.substring(0, result[i].areaName.length-1)
    }

    this.historyData = result;

这里还用到了一个  += 的用法，原因是因为  ： this.areaIdALLData[j].name，每回只能是一个值，

而：result[i].areaName  可能是1个，也可能是2个、3个...

所以这里用到了 += 

result[i].areaName += this.areaIdALLData[j].name + ','

这里塞了一个  逗号，可能会多赛一次，在每个值得最后面又赛了一个逗号，

处理方法：

result[i].areaName = result[i].areaName.substring(0, result[i].areaName.length-1)

完整代码如下：

<template>
  <div>
    12306
    <Table border :columns="columnsData" :data="historyData" width="800"></Table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      areaIdALLData: [], //所有的分区
      columnsData: [
        {
          title: "分区",
          key: "areaName"
        },
        {
          title: "姓名",
          key: "name"
        },
        {
          title: "时间",
          key: "date"
        },
        {
          title: "分区组",
          key: "areaIdList"
        },
        {
          title: "地址",
          key: "address"
        }
      ],
      historyData: [
        // {
        //   name: "Brown",
        //   areaIdList: "04010637100000001,04010637100000002",
        //   address: "New York No. 1 Lake Park",
        //   date: "2016-10-03"
        // },
        // {
        //   name: "Green",
        //   areaIdList: "04010637100000001",
        //   address: "London No. 1 Lake Park",
        //   date: "2016-10-01"
        // },
        // {
        //   name: "Black",
        //   areaIdList: "04010637100000002",
        //   address: "Sydney No. 1 Lake Park",
        //   date: "2016-10-02"
        // },
        // {
        //   name: "Jon Snow",
        //   areaIdList: "04010637100000001,04010637100000002",
        //   address: "Ottawa No. 2 Lake Park",
        //   date: "2016-10-04"
        // }
      ]
    };
  },
  methods: {},
  created() {

    let arry1 = [
      { id: "04010637100000001", name: "分区一" },
      { id: "04010637100000002", name: "分区二" },
      { id: "04010637100000003", name: "分区三" },
      { id: "04010637100000004", name: "分区四" },
      { id: "04010637100000005", name: "分区五" }
    ];
    this.areaIdALLData = arry1;
  },
  mounted() {
    var result = [
      {
        areaName: "",
        name: "Brown",
        areaIdList: "04010637100000001,04010637100000002",
        address: "New York No. 1 Lake Park",
        date: "2016-10-03"
      },
      {
        areaName: "",
        name: "Green",
        areaIdList: "04010637100000001",
        address: "London No. 1 Lake Park",
        date: "2016-10-01"
      },
      {
        areaName: "",
        name: "Black",
        areaIdList: "04010637100000002",
        address: "Sydney No. 1 Lake Park",
        date: "2016-10-02"
      },
      {
        areaName: "",
        name: "Jon Snow",
        areaIdList: "04010637100000001,04010637100000002",
        address: "Ottawa No. 2 Lake Park",
        date: "2016-10-04"
      },
            {
        areaName: "",
        name: "Brown",
        areaIdList: "04010637100000001,04010637100000002",
        address: "New York No. 1 Lake Park",
        date: "2016-10-03"
      },
      {
        areaName: "",
        name: "Green",
        areaIdList: "04010637100000001",
        address: "London No. 1 Lake Park",
        date: "2016-10-01"
      },
      {
        areaName: "",
        name: "Black",
        areaIdList: "04010637100000002",
        address: "Sydney No. 1 Lake Park",
        date: "2016-10-02"
      },
      {
        areaName: "",
        name: "Jon Snow",
        areaIdList: "04010637100000001,04010637100000002",
        address: "Ottawa No. 2 Lake Park",
        date: "2016-10-04"
      },
            {
        areaName: "",
        name: "Brown",
        areaIdList: "04010637100000001,04010637100000002",
        address: "New York No. 1 Lake Park",
        date: "2016-10-03"
      },
      {
        areaName: "",
        name: "Green",
        areaIdList: "04010637100000001",
        address: "London No. 1 Lake Park",
        date: "2016-10-01"
      },
      {
        areaName: "",
        name: "Black",
        areaIdList: "04010637100000002",
        address: "Sydney No. 1 Lake Park",
        date: "2016-10-02"
      },
      {
        areaName: "",
        name: "Jon Snow",
        areaIdList: "04010637100000001,04010637100000002",
        address: "Ottawa No. 2 Lake Park",
        date: "2016-10-04"
      },

    ];

    for(let i=0; i<result.length; i++){
        // let names = [];
        let idArry = result[i].areaIdList.split(',');
        for(let j=0; j<this.areaIdALLData.length; j++){
            idArry.map(v=>{
                if( v == this.areaIdALLData[j].id){
                    // names.push(this.areaIdALLData[j].name)
                    result[i].areaName += this.areaIdALLData[j].name + ','
                }
            })
            //  result[i].areaName = String(names);
        } 
         result[i].areaName = result[i].areaName.substring(0, result[i].areaName.length-1)
    }

    this.historyData = result;




  }
};
</script>
<style scoped>
</style>

最后为了方便大家的沟通与交流请加QQ群： 625787746

请进QQ群交流：【IT博客技术分享群①】：https://jq.qq.com/?_wv=1027&k=DceI0140