javascript - 如何访问我的数据并将其转换为表格格式

Question

我是 vue 新手，当我尝试访问 Arr 数组中 Pos 数组的长度时遇到问题，我还想以表格格式打印，打印时如何分隔每个 b？我的数组有这种格式：

 Arr:[{name:'',Struct:{width:'30',Extra:{id:'x',length:"6"},Pos:{
                  id:'545',b:'',row:'',col:''
               }}}]}

<template>
    <div>

        <input v-model="name" type="text">
        <input v-model="r" type="text" placeholder="r">
        <input v-model="t" type="text" placeholder="t">
        <input v-model="b" type="text" placeholder="b">
        <button type="submit" v-on:click="adding">click</button>

        <table>
            <template v-for="(r,idx) in Arr">
                <tr v-for="(k,index) in r.Struct">
                    <td v-for="(l,idx) in k.Extra.length">
                        {{l}}
                    </td>
                </tr>
            </template>
        </table>
    </div>
</template>

<script>
    export default {
        name: "Add",
        props:['Arr'],
        data()
        {
            return{
                name:'',
                    r:'',
                b:'',
                t:''
            }
        },
        methods:{
            adding(){
                let ExtraArray = [];
                let PosArray = [];

                for (let b = 0; b < this.b; b++) {
                    ExtraArray.push({id: b, offset: b+1000});
                    for (let r = 0; r < this.r; r++) {
                        for (let t = 0; t < this.t; t++) {
                            PosArray.push({id:(b+1)+'*'+(r+10)+'*'+(t+100).toString(), b: b+1, r: r+10, t: t+100});
                        }
                    }

                }
                this.Arr.push({
                    name: this.name,  Struct: {
                        length: '30', width: '44',
                        Extra: ExtraArray, Pos: PosArray
                    }
                });

                console.log(this.Arr);


            }
        }
    }
</script>

我想以这样的表格格式打印：当 row,col,b 的输入为 2 时

          b=0
         row1          row2
      +------------+------------+
 col1 | 1*10*100"  | "1*10*101" |
      +------------+------------+
 col2 | "1*11*100" | "1*11*101" |
      +------------+------------+


           b=1
         row1          row2
      +------------+------------+
 col1 | 2*10*100"  | "2*10*101" |
      +------------+------------+
 col2 | "2*11*100" | "2*11*101" |
      +------------+------------+

依此类推，每个 b

标签： javascriptvue.js

Answer 1

您的表格标记应如下所示：

<template>
  <table>
    <thead>
      <th>
        Header
      </th>
    </thead>
    <tbody>
      <tr v-for="(x, index) in Arr" :key="index">
        <td>
          {{x.struct.extra.length}}
        </td>
      </tr>
    </tbody>
  </table>
</template>