触显触隐表单，跨越清空、提交、刷新与回填的障碍

前端

2023-09-16 16:09:41

问题的根源

在element-ui中，表单项的显隐可以通过v-if或v-show指令控制。当表单项被隐藏时，它的值将不会被提交到服务器。这在某些情况下是必要的，例如当表单项的值是敏感信息时。

然而，在某些情况下，我们可能需要在表单提交时保留隐藏表单项的值。例如，当表单项的值是用户ID或订单ID时。在这种情况下，如果我们使用v-if或v-show指令隐藏表单项，那么表单项的值将不会被提交到服务器，这将导致表单提交失败。

解决方案

为了解决element-ui表单提交时自动清空隐藏的表单值这一问题，我们可以使用以下两种解决方案：

解决方案一：使用`ref`指令

我们可以使用ref指令来获取隐藏表单项的元素。然后，在表单提交时，我们可以使用this.$refs对象来访问隐藏表单项的元素，并获取其值。最后，我们将获取到的值添加到表单数据中，并将其提交到服务器。

<el-form ref="form">
  <el-input v-if="show" type="text" name="username" placeholder="用户名" />
  <el-input type="text" name="password" placeholder="密码" />
  <el-button type="primary" @click="submitForm">提交</el-button>
</el-form>

<script>
export default {
  methods: {
    submitForm() {
      const username = this.$refs.username ? this.$refs.username.value : '';
      const password = this.$refs.password.value;

      const formData = {
        username,
        password,
      };

      this.$http.post('/api/login', formData).then((response) => {
        // 登录成功
      }).catch((error) => {
        // 登录失败
      });
    },
  },
};
</script>

解决方案二：使用`v-model`指令

我们可以使用v-model指令来绑定隐藏表单项的值到一个数据属性。然后，在表单提交时，我们可以直接使用这个数据属性的值，并将其提交到服务器。

<el-form ref="form">
  <el-input v-if="show" type="text" v-model="username" placeholder="用户名" />
  <el-input type="text" v-model="password" placeholder="密码" />
  <el-button type="primary" @click="submitForm">提交</el-button>
</el-form>

<script>
export default {
  data() {
    return {
      username: '',
      password: '',
    };
  },
  methods: {
    submitForm() {
      const formData = {
        username: this.username,
        password: this.password,
      };

      this.$http.post('/api/login', formData).then((response) => {
        // 登录成功
      }).catch((error) => {
        // 登录失败
      });
    },
  },
};
</script>