机构数增加自定义节点内容

文章描述了一个在Vue项目中,如何通过代码实现父节点勾选时子节点自动勾选,以及删除父节点时子节点随之删除的功能,主要涉及`el-tree`组件的事件监听和数据操作。
摘要由CSDN通过智能技术生成

1、需求:父节点勾选后,其子节点也勾选,删除父节点,子节点也被删除

2、代码

renderContent(h, { node, data }) {

      return (

        <span class='custom-tree-node'>

          <span class='tree-node-text-ie'>

            <span>{node.label}</span>

          </span>

          {data.children && data.children.length > 0 ? (

            <span class='tree-node-icon-ie'>

              <el-tooltip

                class='item'

                effect='dark'

                content='选中当前节点和所有下级节点'

                placement='top-start'

              >

                <el-button

                  size='mini'

                  type='text'

                  style='font-size: 12px;'

                  on-click={() => this.selectChildren(data)}

                >

                  <i class='el-icon-circle-check' />

                </el-button>

              </el-tooltip>

              <el-tooltip

                class='item'

                effect='dark'

                content='取消选中当前节点和所有下级节点'

                placement='top-start'

              >

                <el-button

                  size='mini'

                  type='text'

                  style='font-size: 12px;'

                  on-click={() => this.unSelectChildren(data)}

                >

                  <i class='el-icon-circle-close' />

                </el-button>

              </el-tooltip>

            </span>

          ) : (

            <span></span>

          )}

        </span>

      )

    },

    selectChildren(data) {

      const nodes = this.$refs.mainTree.getCheckedNodes()

      const ids = []

      ids.push(data.dhccCode)

      for (let i = 0; i < nodes.length; i++) {

        ids.push(nodes[i].dhccCode)

      }

      getAllChildrenIds(ids, data)

      this.$refs.mainTree.setCheckedKeys(ids)

    },

    unSelectChildren(data) {

      const ids = []

      ids.push(data.dhccCode)

      getAllChildrenIds(ids, data)

      for (let i = 0; i < ids.length; i++) {

        this.$refs.mainTree.setChecked(ids[i], false)

      }

    }
 

export function getAllChildrenIds(ids, data) {

  if (data.children !== undefined) {

    for (let i = 0; i < data.children.length; i++) {

      ids.push(data.children[i].dhccCode)

      const child = data.children[i]

      getAllChildrenIds(ids, child)

    }

  } else {

    return

  }

}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值