73 lines
1.2 KiB
Vue
73 lines
1.2 KiB
Vue
|
<template>
|
||
|
|
<div class="toptabs">
|
||
|
|
<el-tabs v-model="active" @tab-click="tabclick(active)">
|
||
|
|
<el-tab-pane
|
||
|
|
v-for="(item, index) in tabs"
|
||
|
|
:key="index"
|
||
|
|
:name="item.value"
|
||
|
|
>
|
||
|
|
<span slot="label"
|
||
|
|
>{{ item.label }}
|
||
|
|
<i v-if="item.total && active == item.value" class="icon">{{
|
||
|
|
item.total
|
||
|
|
}}</i></span
|
||
|
|
>
|
||
|
|
</el-tab-pane>
|
||
|
|
</el-tabs>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
name:"erpTableTabs",
|
||
|
|
props: {
|
||
|
|
tabs: {
|
||
|
|
type: Array,
|
||
|
|
default: () => {
|
||
|
|
return [];
|
||
|
|
},
|
||
|
|
},
|
||
|
|
activeName: {
|
||
|
|
type: String,
|
||
|
|
default: () => {
|
||
|
|
return "0";
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
active: this.activeName,
|
||
|
|
};
|
||
|
|
},
|
||
|
|
components: {},
|
||
|
|
methods: {
|
||
|
|
tabclick(val) {
|
||
|
|
this.$emit("tabclick", val);
|
||
|
|
},
|
||
|
|
reset() {
|
||
|
|
this.$set(this, "activeName", "0");
|
||
|
|
},
|
||
|
|
changeActiveName(val){
|
||
|
|
this.activeName = val;
|
||
|
|
},
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang='scss'>
|
||
|
|
.toptabs {
|
||
|
|
padding: 0 20px;
|
||
|
|
background: #fff;
|
||
|
|
|
||
|
|
::v-deep .el-tabs__header {
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
::v-deep .el-tabs__nav {
|
||
|
|
height: 45px;
|
||
|
|
line-height: 45px;
|
||
|
|
}
|
||
|
|
.icon {
|
||
|
|
font-style: normal;
|
||
|
|
}
|
||
|
|
</style>
|