vue element动态渲染、移除表单并添加验证的实现

下面我会详细讲解“vue element动态渲染、移除表单并添加验证的实现”的完整攻略。

在vue element中实现动态渲染、移除表单并添加验证的步骤如下：

第一步：引入element-ui组件库和相关模块

在vue项目中，我们首先需要引入element-ui组件库和相关模块以使用其中的表单组件和表单验证功能。

<template>
  <el-form>
    <!-- 表单元素 -->
  </el-form>
</template>

<script>
import { Form, Button, Input } from 'element-ui'
import { required } from 'vuelidate/lib/validators'

export default {
  components: {
    ElForm: Form,
    ElButton: Button,
    ElInput: Input
  },
  validations: {
    // 表单验证规则
  }
}
</script>

第二步：使用v-if指令实现表单的动态渲染

在vue中，我们可以使用v-if指令来实现表单的动态渲染。例如，我们需要根据用户的操作动态添加表单元素，可以在代码中使用v-if指令来实现。

<template>
  <el-form>
    <el-input v-if="showInput"></el-input>
    <el-button @click="showInput = true"></el-button>
  </el-form>
</template>

<script>
export default {
  data () {
    return {
      showInput: false
    }
  }
}
</script>

在上面的示例中，我们根据用户的操作来判断showInput变量是否为true，如果为true，则使用v-if指令渲染el-input元素，否则不渲染。

第三步：使用v-show指令实现表单元素的动态移除

除了使用v-if指令实现动态渲染表单元素之外，我们还可以使用v-show指令来实现表单元素的动态移除。不同于v-if指令，v-show指令只是控制元素的样式，元素并没有真正被移除或添加。

<template>
  <el-form>
    <el-input v-show="showInput"></el-input>
    <el-button @click="showInput = false"></el-button>
  </el-form>
</template>

<script>
export default {
  data () {
    return {
      showInput: true
    }
  }
}
</script>

在上面的示例中，我们根据用户的操作来判断showInput变量是否为true，如果为true，则使用v-show指令显示el-input元素，否则隐藏。

第四步：使用vuelidate实现表单的验证

在vue中，我们可以使用vuelidate库来实现表单的验证。vuelidate库基于validator.js库开发而来，可以提供丰富的表单验证规则和错误提示。

<template>
  <el-form>
    <el-input
      :value="formData.name" 
      @input="(e) => { formData.name = e }" 
      :class="{ 'is-error': $v.formData.name.$error }"
    />
    <p v-if="$v.formData.name.$error">姓名不能为空</p>
  </el-form>
</template>

<script>
import { required } from 'vuelidate/lib/validators'

export default {
  data () {
    return {
      formData: {
        name: ''
      }
    }
  },
  validations: {
    formData: {
      name: { required }
    }
  }
}
</script>

在上面的示例中，我们使用vuelidate库的required方法来创建姓名不能为空的验证规则，并在el-input元素中使用:class绑定属性来实现错误样式的渲染。在el-input元素下方，我们使用v-if指令来判断当前输入是否错误，并显示错误提示。

另外，我们也可以使用vuelidate库的其他验证规则来实现表单的完整验证，例如email、phone等。

希望这份攻略对您有所帮助。