key值与value值的匹配

image.png

image.png

当给出的key值与value值分割开来时，显示数据时需要对数据进行展示，展示前需要对数据进行匹配处理，以便是对应的key显示对应的value值

 let tableListArr = itemsParam.metas //获取相应的表格的名称
          let valueList = items.list //获取到相应value值
          tableListArr.forEach((indItem, index) => {//两者循环获取进行匹配后得到新的数组
            valueList.forEach((itemVal, indexVal) => {
              let objTable = { itemName: indItem.name, itemValue: itemVal[indItem.dataKey] + '' }
              this.tableList.push(objTable)
            })
          })
          let showLineData = { type: 'table',
            titleName: '数据表格',
            id: itemsParam.id,
            tableListArr: this.tableList }
          this.graphsListData.push(showLineData)//把匹配好的数据放在需要遍历展示的容器中

第二种解决方法可以在视图中遍历取值

 <table v-if="item.graphsData&&item.graphsData.list.length>0">
              <tr>
                <td>序号</td>
                <td v-for="(tbHead,tbIndex) in item.metas"
                    :key="tbIndex">{{tbHead.name}}</td>
              </tr>
              <tr v-for="(sign,sindex) in item.graphsData.list"
                  :key="sindex">
                <td>{{sindex+1}}</td>
                <td v-for="(tbHead,tbIndex) in item.metas"
                    :key="tbIndex">{{sign[tbHead.dataKey]}}</td>
              </tr>
            </table>

小编最开始的想法是同时循环item.metas和
<td v-for="(dataKey,index) in item.metas" :key="index"></td>
<td v-for="(sItem,jItem) in sign" :key="jItem">{{sItem|filterVal}}</td>
然后循环判断，当dataKey和sign的key值相等时在进行显示，但是这种情况会出现index和jItem两个都是编号从而重复的现象，所以这种方法pass。

第二种方法

 <table v-if="item.graphsData&&item.graphsData.list.length>0">
              <tr>
                <td>序号</td>
                <td v-for="(tbHead,tbIndex) in item.metas"
                    :key="tbIndex">{{tbHead.name}}</td>
              </tr>
              <tr v-for="(sign,sindex) in item.graphsData.list"
                  :key="sindex">
                <td>{{sindex+1}}</td>
                <!-- sign[item.metas[jItem].dataKey] -->
                <td v-for="(sItem,jItem) in sign"
                    :key="jItem">{{sign[item.metas[jItem].dataKey]}}</td>
              </tr>
            </table>

利用sign取对应的datakey然后获取到对应的datakey的值进行显示，因为sign是一个对象，利用sign[key]获取相应的值，想法没有问题，但是jItem取的值是sign对应key值也就是3,5,7,12,8898988等，并不是理想中的1,2,3，所以没办法循环item.metas，所以取不到相应的dataKey值，所以达不到预想的效果，所以要解决的问题是循环item.metas值，所以往下看

第三种方法

 <table v-if="item.graphsData&&item.graphsData.list.length>0">
              <tr>
                <td>序号</td>
                <td v-for="(tbHead,tbIndex) in item.metas"
                    :key="tbIndex">{{tbHead.name}}</td>
              </tr>
              <tr v-for="(sign,sindex) in item.graphsData.list"
                  :key="sindex">
                <td>{{sindex+1}}</td>
                <td v-for="(tbHead,tbIndex) in item.metas"
                    :key="tbIndex">{{sign[tbHead.dataKey]}}</td>
              </tr>
            </table>

同时循环item.metas和sign，不一定非要用v-for的方式，可以利用sign[key]进行循环取值，即可