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>