经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » Vue.js » 查看文章
详解element-ui设置下拉选择切换必填和非必填
来源:jb51  时间:2019/6/17 10:56:39  对本文有异议

➢ 需求

默认都是必选

下拉选择的时候

选择必填,活动名称为必填,需要校验和显示*

选择非必填,活动名称不做校验,隐藏*

➢ 初始校验规则

经测试,网上其他的方式都没有实现需求,动态切换rules中的required没有作用

因为按照以下的写法的话,element-ui在组件初始化后校验规则就定型了,切换也没用

  1. rules: {
  2. name: [
  3. { required: true, message: "请输入名称", trigger: "blur" }
  4. ],
  5. region: [
  6. { required: true, message: "请选择类型", trigger: "blur" }
  7. ]
  8. }

➢ 解决方案

第一步:

去除rules中需要动态校验的字段规则

去除name

  1. rules: {
  2. region: [
  3. { required: true, message: "请选择类型", trigger: "blur" }
  4. ]
  5. }

第二步:

在字段为nameform-item上,添加required属性

下面代码isHaveTo为新字段,根据下拉框选择的值来决定是为true还是false

  1. <el-form-item label="活动名称" prop="name" :required="isHaveTo">
  2. <el-input v-model="ruleForm.name"></el-input>
  3. </el-form-item>

第三步:

计算属性,新增字段isHaveTo

下拉选择框非必须是为1,其他都是必填,包括默认

  1. <el-form-item label="活动名称" prop="name" :required="isHaveTo">
  2. <el-input v-model="ruleForm.name"></el-input>
  3. </el-form-item>

效果如图:

下拉切换,*号显隐,提交时也有不同规则

注意,新的问题来了

在选择必填时,没有了之前的错误提示文字,而是element自带的提示

第四步:

设置错误提示

使用自定义函数控制流程

name字段重新加回去rules

注意是函数{ validator: validateName }

  1. rules: {
  2. name: [{ validator: validateName }],
  3. region: [
  4. { required: true, message: "请选择类型", trigger: "blur" }
  5. ]
  6. }

然后设置函数validateName

可以看到,必填时按照我们设置的提示语提示,非必填时,校验通过

贴上代码

  1. data() {
  2. // 验证活动名称的函数
  3. let validateName = (rule, value, callback) => {
  4. // 当活动名称为空值且为必填时,抛出错误,反之通过校验
  5. if (this.ruleForm.name === "" && this.isHaveTo) {
  6. callback(new Error("请输入活动名称"));
  7. } else {
  8. callback();
  9. }
  10. };
  11. return {
  12. ruleForm: {
  13. name: "",
  14. region: ""
  15. },
  16. rules: {
  17. name: [{ validator: validateName }],
  18. region: [
  19. { required: true, message: "请选择类型", trigger: "blur" }
  20. ]
  21. }
  22. };
  23. },

➢ 完整demo代码

demo使用vue-cli,引入element-ui

核心代码参考如下:

  1. <template>
  2. <div>
  3. <el-form
  4. :model="ruleForm"
  5. :rules="rules"
  6. ref="ruleForm"
  7. label-width="100px"
  8. class="demo-ruleForm"
  9. >
  10. <el-form-item label="活动名称" prop="name" :required="isHaveTo">
  11. <el-input v-model="ruleForm.name"></el-input>
  12. </el-form-item>
  13. <el-form-item label="活动区域" prop="region">
  14. <el-select v-model="ruleForm.region" placeholder="请选择活动区域" style="width:100%">
  15. <el-option label="必填" value="0"></el-option>
  16. <el-option label="非必填" value="1"></el-option>
  17. </el-select>
  18. </el-form-item>
  19. <el-form-item>
  20. <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
  21. </el-form-item>
  22. </el-form>
  23. </div>
  24. </template>
  25.  
  26. <script>
  27. export default {
  28. name: "HelloWorld",
  29. data() {
  30. // 验证活动名称的函数
  31. let validateName = (rule, value, callback) => {
  32. // 当活动名称为空值且为必填时,抛出错误,反之通过校验
  33. if (this.ruleForm.name === "" && this.isHaveTo) {
  34. callback(new Error("请输入活动名称"));
  35. } else {
  36. callback();
  37. }
  38. };
  39. return {
  40. ruleForm: {
  41. name: "",
  42. region: ""
  43. },
  44. rules: {
  45. name: [{ validator: validateName }],
  46. region: [
  47. { required: true, message: "请选择类型", trigger: "blur" }
  48. ]
  49. }
  50. };
  51. },
  52. computed: {
  53. isHaveTo: function() {
  54. return this.ruleForm.region !== `1`;
  55. }
  56. },
  57. methods: {
  58. submitForm(formName) {
  59. this.$refs[formName].validate(valid => {
  60. if (valid) {
  61. console.log(`已提交表单`);
  62. } else {
  63. console.log("error submit!!");
  64. return false;
  65. }
  66. });
  67. }
  68. }
  69. };
  70. </script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持w3xue。

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号