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"
            <upsPage v-if="item.active"></upsPage>


<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
    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(() => {


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
commented on Thu, 11 Aug 2022

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

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.