element tree封装为可控制只可选末级或都可选(2)

19 篇文章 1 订阅

接上一篇文章改点需求
要求:把只能选择一个末级节点时,其他设置为不可选的地方改为可以再选择其他节点只不过替换掉原来的对节点checkedbox的选择.

修改的封装组件的部分method代码:

   //点击节点触发
      nodeClick(data) {
        if (!this.checkBoxFlag) {
          this.checkData = []
          this.checkData = data
        }
      },
      //获取选择的班组
      checkChange(data, node) {
        //因为如果父级节点只有两条末级节点数据的话不好控制,所以采用倒序查询赋值
        for (let i = node.checkedKeys.length - 1; ; i--) {
          //处理清空已选择的节点
          if (i < 0) {
            this.defaultCheckedKey = []
            this.checkData = undefined
            break
          }
          if (node.checkedKeys[i] !== this.defaultCheckedKey[0]) {
            // 控制只能push一次
            this.defaultCheckedKey = []
            this.defaultCheckedKey.push(node.checkedKeys[i])
            //记录节点数据,返回给父组件
            node.checkedNodes.map((item1) => {
              if (item1.id === node.checkedKeys[i]) {
                this.checkData = item1
              }
            })
            break
          }
        }
        node.halfCheckedKeys.map((item) => this.defaultKey.push(item))
        this.treeKey = new Date().getTime()
        this.$nextTick(() => {
          this.$refs.tree.filter('')
        })
      },
      //树的查询
      filterNode(value, data) {
        let filterFlag = true
        for (let key in this.filteCondation) {
          filterFlag = data[key] === this.filteCondation[key]
          if (!filterFlag) break
        }
        if (!value) return filterFlag
        return data[this.treeProps.label].indexOf(value) !== -1 && filterFlag
      },
      resetForm() {
        this.filterText = undefined
      },
      async open() {
        this.defaultCheckedKey = []
        const { data } = await request({
          url: services[this.service] + this.url,
          method: 'post',
          data: this.data,
        })
        this.treeData = this.data1
        this.checkData = undefined
        //过滤树的数据
        this.$nextTick(() => {
          this.filterText = ''
        })
        this.defaultKey.push(this.treeData[0].id)
        this.treeData[0].children &&
          this.defaultKey.push(this.treeData[0].children[0].id)
        this.dconfig.title = '选择' + this.title
        // 为表单赋值
        this.$refs.dialog.open((cancel) => {
          // 提交按钮回调--触发表单的校验以及提交
          if (!this.checkData) {
            this.$message.error('请选择' + this.title)
          } else {
            this.$emit('getselecteddata', this.checkData)
            cancel()
          }
        })
      },

效果录屏:
在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值