1、监听表单绑定数据的变更
2、切换页面时判断表单绑定数据是否发生变更。如果发生变更,给出提示,由用户选择放弃变更跳转到新的tab还是留在原tab页面。
<template>
<div>
<el-tabs v-model="activeName" tab-position="left" :before-leave="leaveTab">
<el-tab-pane name="tab_1">
<el-form v-if="activeName==='tab_1'" :model="formItem_tab_1">
<el-form-item label="名称" prop="name">
<el-input v-model="formItem_tab_1.name"></el-input>
</el-form-item>
</el-form>
</el-tab-pane>
<el-tab-pane name="tab_2">
<el-form v-if="activeName==='tab_2'" :model="formItem_tab_2" >
<el-form-item label="标题" prop="title">
<el-input v-model="formItem_tab_2.title"></el-input>
</el-form-item>
</el-form>
</el-tab-pane>
</el-tabs>
<el-button @click="handleSave">保存</el-button>
</div>
</template>
<script>
export default {
data(){
return{
activeName: 'tab_1',
formItem_tab_1: {
name: ''
},
formItem_tab_2: {
title: ''
},
changeFlag: false
}
},
methods: {
handleSave() {
this.$nextTick(() => {
this.changeFlag = false
})
},
leaveTab(activeName, oldActiveName) {
if(this.changeFlag == false){
return true
} else {
return this.$msgbox({ title: '变更尚未保存,是否切换页面?' })
}
}
},
watch: {
'formItem_tab_1': {
handler() {
this.changeFlag = true
},
deep: true
},
'formItem_tab_2': {
handler() {
this.changeFlag = true
},
deep: true
}
}
}
</script>