美文网首页vue
vue 组件el-tabs 切换实时更新问题

vue 组件el-tabs 切换实时更新问题

作者: 长夏丶低吟 | 来源:发表于2019-07-25 14:18 被阅读0次

    Vue会在网页加载时把el-tabs全部渲染出来,通过V-if进行选择性渲染

    *********第一部分 定义组件*********

    <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">

      <el-tab-pane label="维护" name="1"><Maintenance v-if="First"/>

      <el-tab-pane label="导入" name="2"><Import v-if="Second"/>

    </el-tabs>

    *********第二部分 定义变量*********

    data() {

    return {

        First:true,

        Second:false,

        activeName:'1'

      }

    },

    *********第三部分 方法*********

    methods: {

    handleClick(tab) {

    if (tab.name ==='1') {

          this.First =true

          this.Second =false

        }else if (tab.name ==='2') {

          this.First =false

          this.Second =true

        }

    }

    }

    相关文章

      网友评论

        本文标题:vue 组件el-tabs 切换实时更新问题

        本文链接:https://www.haomeiwen.com/subject/eikhrctx.html