使用el-cascader实现选择省市区三级地区,初始效果为:只有区级节点可以选择;
需求为:任意级节点都可选中,且省市级为必选。
实现思路:
①将父子节点选择关联解开 => 实现任意级别可选
级联选器结构如下:
<el-form-item label="省市区:" prop="region">
<el-cascader
class="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' }],
},