VUE element-ui之el-tree树形控件勾选节点指定节点自动勾选(指定节点为必选项)

49 篇文章 9 订阅
34 篇文章 2 订阅

产品需求:

  1. 最后一级节点中列表节点为必选项
  2. 勾选列表节点之外的同级节点,列表节点自动勾选
  3. 取消列表节点勾选,其他同级节点也取消勾选(即列表节点为必选项)
  4. 列表之外的节点可单独操作(勾选或取消勾选)

实现步骤:

HTML中定义:

<el-tree
   ref="tree"
   node-key="code"
   show-checkbox
   class="el-tree"
   :indent="0"
   :data="routeList"
   :props="defaultProps"
   :highlight-current="true"
   :default-expand-all="true"
   :expand-on-click-node="false"
   :render-content="renderContent"
   :default-checked-keys="menuIds"
   @check="handleCheckChange" //本次需求需要事件
   @node-expand="handleExpand"
 />

methods中定义:

setRequiredNodeChecked(data) {
      for (let i = 0; i < data.length; i++) {
        if (data[i].type) {
          this.$refs.tree.setChecked(data[i].code, true)
        }
      }
    },
    setNodeUnChecked(data) {
      for (let i = 0; i < data.length; i++) {
        this.$refs.tree.setChecked(data[i].code, false)
      }
    },
    fetchCheckedNodeParent(data, findKey, callback) {
      for (let i = 0; i < data.length; i++) {
        const item = data[i]
        if (item.code && item.code === findKey) {
          callback(data)
          return true
        }
        if (item.childrens && item.childrens.length) {
          const result = this.fetchCheckedNodeParent(item.childrens, findKey, callback)
          if (result) {
            return true
          }
        }
      }
      return false
    },
    checkRequired(currentData, checkedKeys, halfCheckedNodes) {
      const currentKey = currentData.code
      const currentType = currentData.type
      if (checkedKeys.includes(currentKey)) {
        // 当前选中
        this.fetchCheckedNodeParent(halfCheckedNodes, currentKey, this.setRequiredNodeChecked)
      } else if (currentType) {
        // 取消选中,但当前项是必选项(如果取消勾选的是列表,那么其余同级节点全部取消勾选)
        this.fetchCheckedNodeParent(halfCheckedNodes, currentKey, this.setNodeUnChecked)
      }
    },
    // 点击节点
    handleCheckChange(data, node) {
      this.checkRequired(data, node.checkedKeys, node.halfCheckedNodes)
    }

看效果:
在这里插入图片描述
勾选列表之外的节点,列表节点自动勾选(如果取消列表勾选,其他同级节点全部自动取消勾选),单独操作列表节点可正常勾选反选,亲测有效。

  • 2
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 4
    评论
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

赫兹/Herzz

如果我的博文帮助到您请打赏支持

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值