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 许可协议。转载请注明出处!
声援博主:如果您觉得文章对您有帮助,可以点击文章右下角推荐一下。您的鼓励是博主的最大动力!
posted @   东峰叵,com  阅读(16)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· 2 本地部署DeepSeek模型构建本地知识库+联网搜索详细步骤
点击右上角即可分享
微信分享提示