vue中实现选父带子,选子不带父,取子不取父
1 2 3 4 5 6 7 | < el-cascader ref="cascader" v-model="userFrom.major" :show-all-levels="false" :props="{ value: 'id',label: 'name',children: 'childList', multiple: true,checkStrictly: true}" :options="subject" /> |
1 | watch |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | watch: { 'userFrom.major': { handler(newArr, oldArr) { const current = this.findCurrentDepartment(newArr, oldArr) if (!current) return this.$nextTick(() => { if (current.type === 'checked') { // 从级联选择器中取出内部的节点数组,找到当前节点 const targetNode = this.$refs.cascader.checkedNodes.find((item) => { return item.value === current.value[current.value.length - 1] }) if (targetNode) { // 递归找出所有子孙节点,并手动勾选 this.checkedChildrenDepartment([targetNode]) // 更新视图 this.$refs.cascader.$refs.panel.calculateMultiCheckedValue() } } }) }, deep: true } }, |
1 | methods |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | methods: { checkedChildrenDepartment(list = []) { list.forEach((item) => { item.doCheck(true) if (item.children.length > 0) { this.checkedChildrenDepartment(item.children) } }) }, findCurrentDepartment(newArr, oldArr) { const catchNewArr = [...newArr] const catchOldArr = [...oldArr] if (catchNewArr.length > catchOldArr.length) { console.log('为添加') for (let i = 0; i < catchNewArr.length; i++) { const targetIndex = catchOldArr.indexOf(catchNewArr[i]) if (targetIndex === -1) { return { value: catchNewArr[i], type: 'checked' } } } } else { console.log('为取消') for (let i = 0; i < catchOldArr.length; i++) { const targetIndex = catchNewArr.indexOf(catchOldArr[i]) if (targetIndex === -1) { return { value: catchOldArr[i], type: 'cancel' } } } } }, } |
__EOF__

本文作者:东峰叵.com
本文链接:https://www.cnblogs.com/databank/p/18406843.html
关于博主:评论和私信会在第一时间回复。或者直接私信我。
版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!
声援博主:如果您觉得文章对您有帮助,可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力!
本文链接:https://www.cnblogs.com/databank/p/18406843.html
关于博主:评论和私信会在第一时间回复。或者直接私信我。
版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!
声援博主:如果您觉得文章对您有帮助,可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力!
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· 2 本地部署DeepSeek模型构建本地知识库+联网搜索详细步骤