任意层级选择、change事件和必须校验冲突-级联组件-cascader_element-ui

任意层级选择、change事件和必须校验冲突-级联组件-cascader_element-ui

---

目录

---

---

内容

---

前面博客已讲解了级联框的显示与回显问题，但是在使用中，遇到了新的问题：

1、 任意层级选择与chang事件冲突

• 图示：

• 解决方案：去掉标签上的@change事件

• 前后代码对比，更改前：

    // 更改前
     <el-cascader
    	v-model="depts"
    	:options="list"
    	:props="deptOptions"
    	:show-all-levels="false"
    	clearable
    	placeholder="请选择父级部门"
    	@change="setDept" 
      ></el-cascader>
  // 更改后
   <el-cascader
    	v-model="depts"
    	:options="list"
    	:props="deptOptions"
    	:show-all-levels="false"
    	clearable
    	placeholder="请选择父级部门"
      ></el-cascader>
  

同时在向后端发送异步请求之前，根据业务需要封装表单对象。

2、任意层级选择与必选校验冲突

上面由于添加change事件引起冲突，但是如果我们此时需要必选校验，会引起下面的冲突

• 图示：

• 原因：我们在发送异步请求之前会先校验表单，这就需要我们在之前设置值，就需要change事件，又会引起之前的问题。

• 解决：

  • 因为是任意层级选择，又可能没有父级，这是我们可以选择不加必选校验
  • 如果是又这种情况-必须选择2级层级或以上其中一个，那么这时候可以选择不使用级联框。又几级就用几个下拉选择框替代，这时候就需要选择当前层级时，校验上一级是否选择；上级清空时，所有下级清空；

后记 ：

  欢迎交流，本人QQ:806797785

项目源代码地址：https://gitee.com/gaogzhen