JavaScript递归处理，结合vue3+element plus+ts 做一个Table表格 +Checkbox多选框处理

不知你有没有遇到要实现如图这种table表格，选中父节点就包含子节点一起被选中状态

表格样式可以去看看element plus table

要做全选功能的话，可以看看这个element plus checkbox

<script setup lang="ts">
// 数据根据后台接口变化，做个案例
const tableData = [
    {
    id: 0,
    children: [
      {
        id: 44,
        children: [
          {
            id: 66,
            children: null,
          },
        ],
      },
      {
        id: 55,
        children: null,
      },
    ],
  },
  {
    id: 5,
    children: [
      {
        id: 68,
        children: null,
      },
    ],
  },
]
const checkedCities = ref([])
// handleCheckedCitiesChange 是做全选功能会用到

const num = ref([] as any) // 获取选中值
const idsWithChildren = ref([] as any)  // 储存选中当前项的所有对象

// 查找tableData父节点下的子节点
function findAndExtractIds(startId) {
  // 父节点对象包含了多少子节点ID
  const contar = (val: any) => {
    const arts: any = val
    // 看父节点的children是否是array
    if (Array.isArray(arts.children)) {
      for (const items of val.children) {
        if (items.children === null) {
          num.value.push(items.id)
        }
        else {
            if (items.children) {
              num.value.push(items.id)
              contar(items) // 还有children 继续递归遍历
           }
        }
      }
    }
  }
  // 查询选中值，所对应的父节点所包含对象
  const find = (authsData: any, startId) => {
    for (const item of authsData) {
      if (item.id === startId) {
        num.value.push(item.id) // 储存选中的ID
        idsWithChildren.value.push(item)
        return contar(item)
      }
      else {
      // 查不到继续遍历
        if (item.children) {
          find(item.children, startId)
        }
      }
    }
  }
  const authsData = tableData.value
  find(authsData, startId)
}


// 判断当前的值是否在num存在
function ischecked(value) {
  return num.value.includes(value)
}
// handleCheck 开始获取点击选中的值
function handleCheck(value) {
    const arr = num.value
    if (ischecked(value)) {
        const handleCheck = (arrayToAdd: string[]) => {
          // 遍历的相同索引值
          const index = arrayToAdd.findIndex((items) => {
            return items === value
          })
          const parse = arr.splice(index, 1) // 删除对应的选中id
          tableData.value = parse  // 赋值
       }
       handleCheck(arr)
    }
    else {
        findAndExtractIds(value) // 处理js递归
        tableData.value = [...new Set(arr)] // 去掉重复选择的项
        checkedCities.value = Number.parseInt(value) ? arr : []
   }
}


</script>
<template>
    <el-form>
        // 案例 
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="meta.title" label="模块" width="180" />
            <el-table-column label="权限">
              <template #default="scope">
                <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
                  <el-checkbox
                    :key="scope.row.id" :label="scope.row.id"
                    @change="handleCheck(scope.row.id)"
                  >
                    选择
                  </el-checkbox>
                </el-checkbox-group>
              </template>
            </el-table-column>
          </el-table>
    </el-form>
</template>

后续还有需要完善的地方，到时候在补充下，以及多选选择，还没有完善反选多选….

今天的文章JavaScript递归处理，结合vue3+element plus+ts 做一个Table表格 +Checkbox多选框处理分享到此就结束了，感谢您的阅读。