妙用element-ui Checkbox组件，轻松实现树形联动

前端

2023-10-24 03:54:29

前言

在前端开发中，我们经常会遇到需要构建多级联动菜单的情况，比如角色管理、权限管理等场景。这种多级联动菜单通常采用树形结构，用户可以逐级展开或收起菜单，并通过勾选复选框来选择所需的选项。

element-ui是一个非常流行的前端UI框架，它提供了丰富的组件库，其中就包括Checkbox组件。Checkbox组件可以轻松实现复选框的功能，并且可以通过设置级联属性来实现多级联动。

实现原理

Checkbox组件的级联属性可以接受一个函数作为参数，该函数的作用是返回子级选项的数据。我们可以利用这一特性，通过递归的方式构建出树形结构的数据，并通过Checkbox组件的级联属性将其渲染出来。

具体实现步骤如下：

首先，我们需要定义一个递归函数，该函数的参数是父级选项的数据，返回值是子级选项的数据。
在递归函数中，我们需要首先判断父级选项是否具有子级选项。如果没有子级选项，则直接返回一个空数组。
如果父级选项具有子级选项，则需要遍历子级选项，并分别调用递归函数来获取孙级选项的数据。
将所有孙级选项的数据组合起来，并返回给父级选项。
重复以上步骤，直到将所有选项的数据都获取完毕。

代码示例

// 定义递归函数
const getChildrenData = (parentData) => {
  if (!parentData.children) {
    return [];
  }

  return parentData.children.map((childData) => {
    return {
      label: childData.name,
      value: childData.id,
      children: getChildrenData(childData),
    };
  });
};

// 获取树形结构的数据
const treeData = getChildrenData(rootData);

// 渲染Checkbox组件
const CheckboxComponent = {
  template: `
    <el-checkbox-group v-model="checkedValues">
      <el-checkbox v-for="item in treeData" :label="item.value" :key="item.value">
        {{ item.label }}
        <el-checkbox-group v-if="item.children" v-model="item.checkedValues">
          <el-checkbox v-for="child in item.children" :label="child.value" :key="child.value">{{ child.label }}</el-checkbox>
        </el-checkbox-group>
      </el-checkbox>
    </el-checkbox-group>
  `,
  data() {
    return {
      treeData,
      checkedValues: [],
    };
  },
};