undefinedfix
Sign in

Using element in Vue project - UI needs to load El dynamically according to background data - How can I automatically jump to the first page every time I enter the page?

dongogongo edited in Thu, 11 Aug 2022

Attach the code < template >

<div class="ups">
    <el-tabs v-model="editableTabsValue" type="card" @tab-click="show_upsPage" class="sub">
        <el-tab-pane :key="item.name"
                     v-for="item in editableTabs"
                     :label="item.title"
                     :name="item.name">
            <upsPage v-if="item.active"></upsPage>
        </el-tab-pane>
    </el-tabs>
</div>

</template>

<script> // import { getList } from '@/api/table' import UpsPage from '@/views/table/UPS/UpsPage/'

export default {

components: {
  upsPage: UpsPage
},
name: 'UPS',
data() {
  return {
    editableTabsValue: 'A',
    editableTabs: []
  }
},
methods: {
  show_upsPage(event) {
    // var _this = this
    console.log(this.editableTabs)
    this.editableTabs.forEach(function(item) {
      if (item.name === event.name) {
        item.active = true
      } else {
        item.active = false
      }
    })
  }
},
created: function() {
  this.$store.dispatch('upsNumber').then((res) => {
    this.editableTabs = res.data
  }).catch(() => {
  })
  console.log(this.editableTabs)
}

}</script>

The rendering of subcomponents is done through V-IF, while the rendering subcomponents need and item.name Because of the variable name in V-IF item.active It's not multiple, so it needs to be related item.name Make a separate judgment, so as to achieve the goal of how many sub components can be rendered by the number of data in the background, and seek the support of all kinds of gods.

2 Replies
quranandduas
commented on Thu, 11 Aug 2022

After getting the data, just set the value of editabletabsvalue to the name of index 0

M_Salehi
commented on Thu, 11 Aug 2022

I want to ask you how to switch the display. If you use a component, do you have complete code

lock This question has been locked and the reply function has been disabled.