el-tree子节点取消选中,父节点选中效果不变

        工作遇到新需求如下:

1. 点击勾选时,与平时实现效果一样

2. 子级取消选中,父级选中效果不变

        身为菜狗的我为解决需求,贯彻CV大法,百度搜索一番,查到的答案“千篇两律”,应该是我的CV大法技术不佳,这两个答案都不能很好地实现需求,为此,我将两篇答案结合在了一起,只要按需修改node-key即可CV实现。

思路:自定义勾选后实现的效果,选中时,则一并选中该节点的子节点与父节点,取消时,则一并取消子节点,但不处理父节点。

重点:

el-tree部分:

check-strictly = true , 切断父级与子级之间的关系

check = "handleCheck" , 自定义勾选效果

methods部分:

handleCheck, 自定义勾选效果方法,实现上文所说的两点需求

selectChildren,选中子级方法

parentNodesChange,递归处理父级,如果选中的节点存在父级,则勾选父级

实现效果以及代码如下:

el-tree 取消子级,父子效果不变

<template>
  <div>
    <el-tree  
      ref="tree"
      :check-strictly="true" @check="handleCheck"
      :data="data"
      show-checkbox
      node-key="id"
      :props="defaultProps">
    </el-tree>
  </div>
</template>

<script>
export default {
  name: 'TreeDemo',
  data() {
    return {
      data: [{
                id: 1,
                label: '一级 1',
                children: [{
                  id: 4,
                  label: '二级 1-1',
                  children: [{
                    id: 9,
                    label: '三级 1-1-1'
                  }, {
                    id: 10,
                    label: '三级 1-1-2'
                  }]
                }]
              }, {
                id: 2,
                label: '一级 2',
                children: [{
                  id: 5,
                  label: '二级 2-1'
                }, {
                  id: 6,
                  label: '二级 2-2'
                }]
              }, {
                id: 3,
                label: '一级 3',
                children: [{
                  id: 7,
                  label: '二级 3-1'
                }, {
                  id: 8,
                  label: '二级 3-2'
                }]
              }],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  methods: {
    handleCheck (data, { checkedKeys }) {
      if (checkedKeys.includes(data.id)) { // 选中
        let node = this.$refs.tree.getNode(data.id)  // getNode(node-key)
        this.selectChildren(data, true) // 选中子节点
        this.parentNodesChange(node) // 选中父节点
      } else {
        this.selectChildren(data, false) // 取消子节点
      }
    },
    selectChildren (data, checked) {
      data && data.children && data.children.map(item => {
        this.$refs.tree.setChecked(item.id, checked);
        if (data.children) {
          this.selectChildren(item, checked)
        }
      });
    },
    // 父级递归
    parentNodesChange (node) {
      // console.log(node);
      if (node.parent) {
        for (let key in node) {
          if (key == 'id') {
            // console.log(node[key]);
            this.$refs.tree.setChecked(node, true);
          }
        }
        if (node.parent && node.id !== 0) {
          this.parentNodesChange(node.parent)
        }
      }
    },
  }
}
</script>

<style>

</style>

  • 8
    点赞
  • 18
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
el-tree 中,要实现点击节点选中取消选中的功能,你可以按照以下步骤进行操作: 1. 首先,为每个节点添加一个额外的属性来记录其选中状态。你可以在数据源中为每个节点对象添加一个名为 `checked` 的属性,并将其初始值设置为 `false`。 2. 在 el-tree 的 `node-click` 事件中,切换节点的选中状态。你可以通过监听 `node-click` 事件来获取点击的节点对象,并在事件处理程序中切换 `checked` 属性的值。例如,你可以使用以下代码: ```html <el-tree :data="treeData" @node-click="handleNodeClick"></el-tree> ``` ```javascript methods: { handleNodeClick(data) { data.checked = !data.checked; } } ``` 3. 在 el-tree 的节点模板中,根据节点的选中状态来设置相应的样式。你可以使用 `:class` 绑定动态类名,根据节点的 `checked` 属性来判断是否添加一个表示选中状态的类名。例如,你可以使用以下代码: ```html <el-tree :data="treeData" :props="{ 'class': 'custom-node' }" @node-click="handleNodeClick"> <template v-slot="{ node }"> <span :class="{'custom-node-selected': node.checked}">{{ node.label }}</span> </template> </el-tree> ``` ```css .custom-node-selected { background-color: #e0f0ff; } ``` 通过以上步骤,你就可以实现 el-tree 中点击节点选中取消选中的功能了。每当你点击一个节点时,它的 `checked` 属性将会切换,并且节点的样式也会相应地改变。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值