el-element中el-tabs案例的使用

el-element中el-tabs的使用

代码呈现

复制代码
<template>
  <div class="enterprise-audit">
    <div class="card">
      <div class="cardTitle">
        <p>交易查询</p>
      </div>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="记录" name="first">
          {{1}}
        </el-tab-pane>
        <el-tab-pane label="资" name="second">
          {{2}}
        </el-tab-pane>
        <!-- <el-tab-pane label="金" name="third">
          {{3}}
        </el-tab-pane> -->
        <el-tab-pane label="录" name="fourth">
          {{4}}
        </el-tab-pane>
        <el-tab-pane label="池" name="fifth">
          {{5}}
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>

export default {
  components: {

  },
  props: {

  },
  data() {
    return {
      activeName: this.$route.query.activeName || 'first'
    }
  },
  created() {
    this.handleClick()
  },
  methods: {

    // tabs 切换
    handleClick(tab, event) {
      this.activeName = tab.name
    }
  }
}
</script>

<style lang="scss" scoped>

</style>

总结

点击事件能过获得相应子组件的实例对象

点击事件能够获得事件对象

通过点击事件把tab.name相应的值给展示的activeName这个变量

activeName这个变量也可以根据路由传过来的值进行切换

相关推荐
你的人类朋友9 小时前
【Node.js】什么是Node.js
javascript·后端·node.js
dae bal10 小时前
关于RSA和AES加密
前端·vue.js
柳杉10 小时前
使用three.js搭建3d隧道监测-2
前端·javascript·数据可视化
刺客-Andy11 小时前
React 第七十节 Router中matchRoutes的使用详解及注意事项
前端·javascript·react.js
代码老y13 小时前
十年回望:Vue 与 React 的设计哲学、演进轨迹与生态博弈
前端·vue.js·react.js
zzywxc78713 小时前
详细探讨AI在金融、医疗、教育和制造业四大领域的具体落地案例,并通过代码、流程图、Prompt示例和图表等方式展示这些应用的实际效果。
开发语言·javascript·人工智能·深度学习·金融·prompt·流程图
大明8813 小时前
用 mouseover/mouseout 事件代理模拟 mouseenter/mouseleave
前端·javascript
林太白13 小时前
Nuxt.js搭建一个官网如何简单
前端·javascript·后端
晴空雨13 小时前
一个符号让 indexOf 判断更优雅!JavaScript 位运算的隐藏技巧
前端·javascript
前端snow13 小时前
前端无接口实现Table导出Excel的两种方案(附完整代码)
javascript·vue.js·react.js