vue element checkbox多选框多组联动数据嵌套多选、单选实际应用

最新推荐文章于 2024-08-20 09:45:52 发布

杨哥杨哥万万岁

最新推荐文章于 2024-08-20 09:45:52 发布

阅读量7.1k

点赞数 2

分类专栏： element ui vue

本文链接：https://blog.csdn.net/wozhenhaokan/article/details/102920343

版权

本文介绍了一个在Vue项目中使用Element UI实现多选框联动的案例，特别是处理了数据嵌套和单选多选的交互。通过解析后台返回的数据结构，结合Element UI的checkbox组件，创建了全选、选中状态控制等功能。同时，提出了对于提高代码可读性的新思路，涉及数据结构转换和自定义filter方法。

摘要由CSDN通过智能技术生成

先看我最近项目中要实现的功能，点击“干部管理组“、”员工管理组“与下属员工复选框实现联动

后台返回的数据结构大概是这样的

[
  {
    title: '干部',
    rows: [
      {
        id: 1,
        name: '张三'
      },
      {
        id: 2,
        name: '张四'
      },
      .......
    ]
  },
  {
    title: '员工',
    rows: [
      {
        id: 3,
        name: '李三'
      },
      {
        id: 3,
        name: '李四'
      },
      .......
    ]
  },
  .......
]

官方文档多选示例：