ElementUI树形组件仅层勾选

在使用ElementUI的树形组件时，有时我们需要实现仅层节点可被勾选的功能。本文将介绍如何通过配置和自定义方法来实现这一需求，并提供多种解决方案。

解决方案概述

要实现仅层节点可被勾选的功能，我们可以通过以下几种方式：

1. 使用 check-strictly 属性：该属性可以控制节点的选中状态是否严格遵循父子节点不互相关联的原则。
2. 自定义 render-content 插槽：通过自定义渲染内容，可以控制每个节点的勾选框显示与否。
3. 监听 check-change 事件：通过监听节点选中状态的变化，手动控制层节点的选中状态。

使用 check-strictly 属性

check-strictly 属性可以控制节点的选中状态是否严格遵循父子节点不互相关联的原则。结合 default-checked-keys 和 node-key 属性，可以实现仅层节点可被勾选的效果。

html

  
</p>


export default {
  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',
            },
          ],
        },
      ],
      defaultCheckedKeys: [1, 2],
    };
  },
  methods: {
    handleCheckChange(data, checked, indeterminate) {
      if (data.children && data.children.length > 0) {
        this.$refs.tree.setChecked(data.id, checked);
      }
    },
  },
};


<p>

自定义 render-content 插槽

通过自定义 render-content 插槽，可以控制每个节点的勾选框显示与否。对于层节点，显示勾选框；对于其他层级的节点，隐藏勾选框。

html

  
</p>


export default {
  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',
            },
          ],
        },
      ],
    };
  },
  methods: {
    renderContent(h, { node, data, store }) {
      const isRoot = !data.parentId;
      return (
        <span class="custom-tree-node">
          {isRoot ? (
            {node.label}
          ) : (
            <span>{node.label}</span>
          )}
        </span>
      );
    },
  },
};


<p>

监听 check-change 事件

通过监听 check-change 事件，可以在节点选中状态变化时进行手动控制，确保只有层节点可以被选中。

html

  
</p>


export default {
  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',
            },
          ],
        },
      ],
    };
  },
  methods: {
    handleCheckChange(data, checked, indeterminate) {
      if (data.children && data.children.length > 0) {
        this.$refs.tree.setChecked(data.id, checked);
      } else {
        this.$refs.tree.setChecked(data.id, false);
      }
    },
  },
};


<p>

以上三种方法都可以实现ElementUI树形组件仅层节点可被勾选的功能。根据具体需求和项目情况，可以选择最适合的方法进行实现。