el-cascader 级联选器中实现任意级别都可选，且前两级别为必选

使用el-cascader实现选择省市区三级地区，初始效果为：只有区级节点可以选择；

需求为：任意级节点都可选中，且省市级为必选。

实现思路：

①将父子节点选择关联解开 => 实现任意级别可选

级联选器结构如下：

<el-form-item label="省市区:" prop="region"><el-cascaderclass="region"size="mini"clearable:options="options":props="{ checkStrictly: true }"v-model="form.region"@change="handleChange"></el-cascader>
</el-form-item>

其中，配置:props参数结构实现任意节点可选。

:props="{ checkStrictly: true }"

造成各节点出现单选框，且无法点击节点名称即完成选中。

②将各节点的单选框覆盖整个选项 => 实现点击选项区域即可选中

.el-cascader-panel .el-radio {width: 100%;height: 100%;z-index: 10;position: absolute;top: 10px;right: -10px;}

③隐藏各节点的单选框样式

.el-cascader-panel .el-radio__input {visibility: hidden;}.el-cascader-panel .el-cascader-node__postfix {top: 10px;}

④自定义表单校验规则 => 实现前两级别为必选

自定义校验规则如下：

 data () {// 自定义校验规则const regionChoose = (rule, value, callback) => {if (!value) {callback(new Error('单位所在地不能为空'))} else if (value.length < 2) {callback(new Error('市级所在地不能为空'))} else {callback()}}
}

在rules中调用：（其中的region对应el-form-item表单中的prop）

rules: {region: [{ type: 'array', required: true, validator: regionChoose, trigger: 'blur' }],},

el-cascader 级联选器中实现任意级别都可选，且前两级别为必选相关推荐

著名的斐波拉契数列（Fibonacci），除第一个和第二个数外，任意一个数都可由前两个数相加得到： 1, 1, 2, 3, 5, 8, 13, 21, 34, ...
def fib(max):n, a, b = 0, 0, 1while n < max:print(b)a, b = b, a + bn = n + 1return 'done' 注意,赋值语句 ...
自动识别查找特定的串口号比如设备管理器中Modem属性里的串口按这个方法可以获取设备管理器任意信息。C++
1.目标: 自动识别查找特定的串口号 2.注册表里搜串口号设备管理器中所有的信息都在注册表中有,那么我直接在注册表里搜COM143. 搜到了这个,但这里有2个名称key相同的.后面193,192还是 ...
vue中级联选择器回填_浅谈Vue使用Cascader级联选择器数据回显中的坑
业务场景由于项目需求,需要对相关类目进行多选,类目数据量又特别大,业务逻辑是使用懒加载方式加载各级类目数据,编辑时回显用户选择的类目. 问题描述使用Cascader级联选择器过程中主要存在的应用问 ...
LUT查找表实现多路复选器原理精讲
(1)多路复选器的概念多路复用器即数据选择器,用来将N个输入通道的数据复用到一个输出通道上,多路复用器在数字系统中有着非常重要的应用.4选1多路复用器的实现结构如图所示: 图中有四路数据 C0到C3 ...
matlab清除所有数据,清除仿真数据检查器中的所有数据
将数据记录到仿真数据检查器此示例将模型 slexAircraftExample 的仿真数据记录到仿真数据检查器.该模型未配置为记录数据.加载该模型,并标记 Stick.alpha, rad 和 q, ...
优必选在 CES 上发布了一个真·家庭服务机器人
这可能是第一个走进你我家里的大型仿人服务机器人. 2019 年 CES 上,优必选发布了 Walker 新一代机器人.它身高 1.45 米,体重 77 千克,走起路来四平八稳,还能和人打招呼,科幻感十 ...
弱人工智能阶段，优必选融资重视生态布局
5月3日,优必选宣布获得8.2亿美元的C轮融资,据优必选CEO周剑透露,公司最新的估值是50亿美金,今年下半年或明年,可能还会启动C+轮融资.这个融资数额刷新了全球 AI 领域的单轮融资记录.优必选也 ...
优必选发布4999元便携机器人“悟空”，开放ROSA机器人系统
关注网易智能,聚焦AI大事件,读懂下一个大时代! [网易智能讯 9月27日消息]今天下午,国内机器人公司优必选在上海召开发布会,正式推出旗下新款便携智能机器人"悟空"以及ROSA机 ...
让机器人飞入寻常百姓家，优必选这三步棋很关键
9月27日,机器人明星公司优必选在上海召开年度发布会,发布了便携式智能机器人悟空和全球首个大规模商用的服务机器人操作系统ROSA,同时与上海当代艺术馆达成跨界战略合作,并宣布日本Robi机器人之父高桥 ...

el-cascader 级联选器中实现任意级别都可选，且前两级别为必选

el-cascader 级联选器中实现任意级别都可选，且前两级别为必选相关推荐

最新文章

热门文章