Vue+element-ui实现含有多个tab标签页的编辑页面，watch监听数据变更，切换tab页时提醒数据变更。

cs_07030404_dn

已于 2024-06-07 20:03:07 修改

阅读量482

点赞数 1

文章标签： vue.js javascript 前端

于 2024-06-07 19:57:40 首次发布

本文链接：https://blog.csdn.net/cs_07030404_dn/article/details/139534679

版权

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>