- Tabs标签点击的on-click事件是先进行切换再处理事件里面的逻辑,而需求是在切换前先判断是否满足切换条件,满足则切换,否则不切换。所以on-click事件不能处理这类事件。
- 解决该问题的的方法只有通过:自定义标签页的内容以及它的事件完成TabPane :label=“label2”
<style>
.block
> .ivu-tabs
> .ivu-tabs-bar
> .ivu-tabs-nav-container
> .ivu-tabs-nav-wrap
> .ivu-tabs-nav-scroll
> .ivu-tabs-nav
.ivu-tabs-tab {
padding: 0;
}
</style>
<template>
<Tabs size="small" class="block block2" v-model="name" :value="name">
<TabPane :label="label1" name="basic">
<BasicTable ref="basicTable"></BasicTable>
</TabPane>
<TabPane :label="label2" name="search">
<TableSearch ref="tableSearch"></TableSearch>
</TabPane>
</Tabs>
</template>
<script type="text/ecmascript-6">
export default {
data() {
return {
label1: "",
label2: "",
leaveName: ""
};
},
components: {
TableFiled,
TableSearch
},
created() {
this.label1 = this.getLabel("基本信息", "basic");
this.label2 = this.getLabel("表典型查询", "search");
},
methods: {
tabClick(tab) {
this.leaveName = tab;
this.saveTip = !(
this.$refs.basicTable.disabled &&
this.$refs.tableSearch.disabled &
);
return this.saveTip;
},
getLabel(label, name) {
var that = this;
return h => {
return h(
"div",
{
style: {
padding: "8px 16px"
},
on: {
click: e => {
var tip = that.tabClick(name);
if (tip) {
e.stopPropagation();
} else {
console.log("离开");
}
}
}
},
label
);
};
}
}
};
</script>
- 注意:需要把绑定事件的标签占满父标签,所以需要给变tab的标签样式