element ui 级联选择器Cascader 实现一级菜单多选二级菜单单选

最新推荐文章于 2025-06-10 17:01:28 发布

隔岸观火96

最新推荐文章于 2025-06-10 17:01:28 发布

阅读量401

点赞数 1

CC 4.0 BY-SA版权

文章标签： vue.js 前端

本文链接：https://blog.csdn.net/weixin_49524417/article/details/147383081

 <el-cascader class="w-100" v-model="list"
              :options="customsOptions" :props="cascaderProps"
              clearable @change="handleChange">
 </el-cascader>

//customsOptions：这个是级联选择器的数据源
// 级联选择器配置
const cascaderProps = {
  multiple: true, // 支持多选
  checkStrictly: false,  // 可以选择任意一级
  expandTrigger: 'hover',  // 悬浮展开
};

const list = ref([])
// 关区级联单选功能
const handleChange = (value:Array) => {

  const copyValue = cloneDeep(value)
  // 二级菜单单选的实现
  const checkList = [...copyValue].reverse()
  let list = []
  checkList.forEach((item) => {
    const flag = !list.some(
      (ci) => item[0] === ci[0] && item.length === ci.length
    )
    if (flag) list.push(item)
  })
  nextTick(()=>{
    list.value = list.reverse()
  })
}）