任意层级选择、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