el-form表单里面的字段用v-if和v-show的区别

在 el-form 表单中使用 v-if 和 v-show 来控制字段的显示与隐藏都是可以的，但它们的实现方式不同，因此在使用时需要注意以下几点区别：

1. v-if 是通过销毁和重新创建 DOM 元素来实现的，而 v-show 则是通过控制 CSS display 属性来实现的。因此，v-if 会有更高的切换开销，而 v-show 的切换开销较小。

2. 当初始渲染时，v-if 会立即根据表达式的值决定是否渲染该元素，而 v-show 会始终渲染该元素，只是通过控制 CSS display 属性来控制其是否显示。

3. 当表达式的值发生变化时，v-if 会销毁原来的元素并重新创建新的元素，而 v-show 则只是简单地切换 CSS display 属性。

4. 当使用 v-if 时，被隐藏的元素的数据不会被提交到后端，而使用 v-show 则不会影响数据的提交。

因此，在选择 v-if 和 v-show 时，需要根据具体的情况进行选择。如果需要频繁切换显示状态，可以考虑使用 v-show，否则可以使用 v-if。同时，需要注意上述的区别，确保在使用时不会出现意料之外的问题。

相关问题

el-form 提交表单

el-form是Vue.js中的一个表单组件，用于收集用户输入的数据并提交到后台。在这个例子中，el-form被用于提交表单数据。具体的步骤如下：

1. 首先，通过let formData=new FormData()创建一个FormData对象，用于存储表单数据。
2. 接着，在methods中的showData方法中，将表单中的各个字段的值添加到formData对象中，使用formData.append()方法。
3. 然后，调用add(formData)方法将formData对象作为参数传递给add函数，该函数将数据提交到后台[1]。
4. 最后，根据后台返回的数据进行相应的处理。如果返回的数据的code为"0000"，则关闭对话框(this.dialogApp=false)，否则显示错误信息(Message.error(res.data.message))。

总结来说，el-form通过创建一个FormData对象，并将表单数据添加到该对象中，然后通过调用add方法将数据提交到后台。完成表单的提交操作。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *3* [vue使用element-ui组件，通过el-form进行表单提交](https://blog.csdn.net/jgp1234/article/details/120474380)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
- *2* [vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作](https://download.csdn.net/download/weixin_38502722/12924507)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]

el-form放el-table里面 表单校验必填提示变成batchList.${scope.$index}.bq_price

在Vue.js中，`el-form`通常用于表单验证，而`el-table`用于数据展示。当你将一个`el-form`放在`el-table`的行(`row`)里，如果某列设置了必填规则，表单提交前会检查该字段是否为空。当你使用模板字符串`${scope.$index}`动态绑定每个表格行的数据时，比如价格(bq_price)字段需要验证，可以在验证规则中引用这个动态路径。

例如，在`el-form-item`的`rules`属性中，你可以这样设置必填提示：

<template>
  <el-form :model="batchList">
    <el-table-column prop="bq_price" label="价格" v-for="(item, index) in batchList" :key="index">
      <template slot-scope="scope">
        <el-form-item :label="$t('必填') + ':'" :prop="'batchList.' + index + '.bq_price'">
          <el-input v-model="scope.row.bq_price"></el-input>
          <el-form-item-error @show="errorShow(index)" :show="{ valid: false }"></el-form-item-error>
        </el-form-item>
      </template>
    </el-table-column>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      batchList: [
        { bq_price: '' },
        // 更多数据...
      ]
    };
  },
  methods: {
    errorShow(index) {
      this.$refs.form.validateField('batchList.' + index + '.bq_price', (valid) => {
        if (!valid) {
          this.$message.error('batchList.' + index + '.bq_price 是必填项');
        }
      });
    }
  }
};
</script>

在这里，当某个`bq_price`字段为空时，就会显示相应的必填提示，提示信息就是`batchList.${scope.$index}.bq_price`。