如何用element-ui和vue来判断表单是否被修改

可以使用Vue的watch属性来监听表单数据的变化，然后使用Element-ui的ElMessageBox组件来弹出对话框询问用户是否保存修改。

具体步骤如下：

1. 在Vue的data中定义表单数据和一个变量来标记表单是否被修改：

data() {
  return {
    form: {
      name: '',
      age: '',
      email: ''
    },
    isFormChanged: false
  }
}

2. 监听表单数据的变化，将isFormChanged标记为true：

watch: {
  form: {
    handler(newVal, oldVal) {
      this.isFormChanged = true
    },
    deep: true
  }
}

3. 在表单提交时，重置isFormChanged为false：

submitForm() {
  // 提交表单逻辑
  this.isFormChanged = false
}

4. 在离开页面时，判断表单是否被修改，如果修改则弹出对话框询问用户是否保存修改：

beforeRouteLeave(to, from, next) {
  if (this.isFormChanged) {
    this.$confirm('表单已被修改，是否保存？', '提示', {
      confirmButtonText: '保存',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      // 保存表单逻辑
      next()
    }).catch(() => {
      next(false)
    })
  } else {
    next()
  }
}

这样就可以通过监听表单数据的变化来判断表单是否被修改，并且在离开页面前弹出对话框询问用户是否保存修改了。