el-cascader禁用前两级,并且不影响后面数据的选择
·
el-cascader今天遇到一个需求,需要禁用前两级,只选择后面的数据
特此记录
如下图:

思路: el-cascader 数据中添加disabeld=true 来实现禁用
<el-cascader
style="width: 100%"
v-model="formData.buildInfoData.address"
:options="dictData.location"
placeholder="请选择项目建设地点"
:props="{
checkStrictly: true,
value: 'id',
label: 'name',
children: 'children'
}"
clearable
/>
数据源需要通过递归函数来添加disable
由于逻辑比较简单,我就直接贴代码了
// 递归函数,为前两级选项添加 disabled: true
function addDisabledToTopTwoLevels(options, level = 0) {
return options.map(option => {
const newOption = { ...option };
if (level < 2) {
newOption.disabled = true;
}
if (newOption.children) {
newOption.children = addDisabledToTopTwoLevels(newOption.children, level + 1);
}
return newOption;
});
//数据源
addDisabledToTopTwoLevels(list)
}```
DAMO开发者矩阵,由阿里巴巴达摩院和中国互联网协会联合发起,致力于探讨最前沿的技术趋势与应用成果,搭建高质量的交流与分享平台,推动技术创新与产业应用链接,围绕“人工智能与新型计算”构建开放共享的开发者生态。
更多推荐


所有评论(0)