为了账号安全,请及时绑定邮箱和手机立即绑定

为什么每当单击父表的行时,子表(切换表)都会重复?

为什么每当单击父表的行时,子表(切换表)都会重复?

达令说 2022-09-23 21:54:58

我试图做一个包含国家GDP的表格。当任何人单击州行时,将显示子表(地区 GDP 表)。它工作正常,但子表在重复。我制作了一个切换功能来控制子表的隐藏/显示。谁能找出为什么子表重复?解决方案将不胜感激。


运行代码段以正确理解问题。


  var app = new Vue({

  el: "#app",

  data(){

    return {

    opened:[],

    stateGDP: [

        { State: "Rajasthan", "1999-00": "2547", "2000-01": "3679",Id:"23" },

        { State: "Orissa", "1999-00": "38714", "2000-01": "38814",Id:"24" }

      ],

      DistrictGDP: [

        {

          State: "Rajasthan",

          District: "Jaipur",

          "1999-00": "2547",

          "2000-01": "3679",

          Id:"23"

        },

        {

          State: "Rajasthan",

          District: "Jodhpur",

          "1999-00": "2557",

          "2000-01": "3639",

          Id:"23"

        },

        {

          State: "Orissa",

          District: "Bhubaneswar",

          "1999-00": "1983",

          "2000-01": "2068",

          Id:"24"

        },

        {

          State: "Orissa",

          District: "Puri",

          "1999-00": "1923",

          "2000-01": "2008",

          Id:"24"

        }

      ]

      }

    },

  methods:{

    toggle:function(Id) {

    const index = this.opened.indexOf(Id);

    if (index > -1) {

      this.opened.splice(index, 1)

    } else {

      this.opened.push(Id)

    }

 }

}

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">

        <div class="table">

          <table class="table-fill">

            <thead>

            <tr>

    <th class="text-center">State/UT</th>

    <th class="text-center">1999-00</th>

    <th class="text-center">2000-01</th>

</tr>

</thead>

  <template v-for="row in stateGDP">

    <tr @click="toggle(row.Id)" :class="{ opened: opened.includes(row.Id) }">

      <td>{{ row.State }}</td>

      <td>{{ row['1999-00'] }}</td>

      <td>{{ row['2000-01'] }}</td>

    </tr>

    <template v-for="(xy, indexStop) in DistrictGDP" v-if="opened.includes(row.Id) && row.Id==xy.Id">

    <thead>

    <tr>


查看完整描述

1 回答

?
紫衣仙女

TA贡献1496条经验 获得超16个赞

 var app = new Vue({

  el: "#app",

  data(){

    return {

    opened:[],

    stateGDP: [

        { State: "Rajasthan", "1999-00": "2547", "2000-01": "3679",Id:"23" },

        { State: "Orissa", "1999-00": "38714", "2000-01": "38814",Id:"24" }

      ],

      DistrictGDP: [

        {

          State: "Rajasthan",

          District: "Jaipur",

          "1999-00": "2547",

          "2000-01": "3679",

          Id:"23"

        },

        {

          State: "Rajasthan",

          District: "Jodhpur",

          "1999-00": "2557",

          "2000-01": "3639",

          Id:"23"

        },

        {

          State: "Orissa",

          District: "Bhubaneswar",

          "1999-00": "1983",

          "2000-01": "2068",

          Id:"24"

        },

        {

          State: "Orissa",

          District: "Puri",

          "1999-00": "1923",

          "2000-01": "2008",

          Id:"24"

        }

      ]

      }

    },

  methods:{

    toggle:function(Id) {

    const index = this.opened.indexOf(Id);

    if (index > -1) {

      this.opened.splice(index, 1)

    } else {

      this.opened.push(Id)

    }


 },

    getRows(id) {

      return this.DistrictGDP.filter(district => district.Id === id);

    }

}

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js">. 

</script>

<div id="app">

  <div class="table">

    <table class="table-fill">

      <thead>

        <tr>

          <th class="text-center">State/UT</th>

          <th class="text-center">1999-00</th>

          <th class="text-center">2000-01</th>

        </tr>

      </thead>

      <template v-for="row in stateGDP" :class="{ opened: opened.includes(row.Id) }">

        <tr @click="toggle(row.Id)" style="background-color: #D3D3D3">

          <td>{{ row.State }}</td>

          <td>{{ row["1999-00"] }}</td>

          <td>{{ row["2000-01"] }}</td>

        </tr>

        <template

          v-if="opened.includes(row.Id)"

        >

          <thead>

            <tr>

              <th class="text-center">District</th>

              <th class="text-center">1999-00</th>

              <th class="text-center">2000-01</th>

            </tr>

          </thead>

        <tr v-for="(district, index) in getRows(row.Id)">

          <td colspan="1">{{district.District}}</td>

          <td colspan="1">{{district['1999-00']}}</td>

          <td colspan="1">{{district['2000-01']}}</td>

        </tr>

        </template>

      </template>

    </table>

  </div>

</div>

现在的解释是,为了获得要在单击时显示的行,您正在执行一个 v-for 循环,并重新创建标头和整个嵌套表,其次数与 DistrictGDP 存在时相同,并且具有相同的 ID 与状态 GDP 相同(在本例中为两次)。

我删除了 v-for(整个代码中的第二个),为了呈现嵌套表行,我添加了一个方法 getRows,此方法基于该行筛选所需的行。Id,这样,表格就不需要比较地区GDP中的ID是否与州GDP中的ID相同。

请,如果我不清楚,请告诉我。


查看完整回答
反对 回复 3天前
  • 1 回答
  • 0 关注
  • 8 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信