el 要素での el タブの使用
コードのレンダリング
<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>
要約する
クリック イベントは、対応するサブコンポーネントのインスタンス オブジェクトを取得できます。
クリックイベントはイベントオブジェクトを取得できます
クリックイベントを通じて表示される変数 activeName に、tab.name の対応する値を与えます。
activeName 変数は、ルートによって渡される値に応じて切り替えることもできます。