Vue3 递归组件 全选或者全不选 重命名组件（不修改文件名称）

Posted 2023-03-05 安果移不动

新建Tree.ts 

export  interface Tree 
    name: string,
    children?: Tree[],
    checked: boolean

这是递归的结构。

新建 Tree.vue 这个是递归组件

<template>
  <div v-for="item in data" class="treeVue">
    <input type="checkbox"
           :checked="item.checked"
           @click.stop="clickTap(item)"
    >
    <!--    @change="item.checked = !item.checked"-->

    <span> item.name </span>
    <!--    对组件进行递归-->
    <TreeVue1 :data="item.children" v-if="item.children && item.children.length > 0"/>
  </div>
</template>

<script lang="ts" setup>


import Tree from "../ts/Tree";

defineProps<
  data?: Tree[]
>()

const clickTap = (item: Tree) => 
  const newStats= !item.checked
//遍历item 点击全选或者全部取消
  const check = (item: Tree) => 

    item.checked = newStats
    if (item.children && item.children.length > 0) 
      item.children.forEach((item) => 
        check(item)
      )
    
  
  check(item)



</script>
<!--如果想重命名 可以新建一个script 如下-->
<script lang="ts">
export default 
  name: "TreeVue1",


</script>


<style lang="less" scoped>
.treeVue 
  padding-left: 20px;


</style>

准备好数据 这是App.vue

<template>
  <TreeVue :data="data" />
</template>

<style scoped>
#app, html, body 

  height: 100%;


* 
  padding: 0;
  margin: 0;


</style>

<script setup lang="ts">

import reactive from "vue";
import TreeVue from "./components/TreeVue.vue";
import Tree from "./ts/Tree";


const data = reactive<Tree[]>([
  
    name: "1", checked: false, children: [
      
        name: "1-1", checked: false, children: [
          name: "1-1-1", checked: false,
          name: "1-1-2", checked: false,
          name: "1-1-3", checked: false,
        ]
      ,
      name: "1-2", checked: false,
      
        name: "1-3", checked: false, children: [
          name: "1-3-1", checked: false,
          name: "1-3-2", checked: false,
          name: "1-3-3", checked: false,
        ]
      ,
    ]
  ,
])

</script>

效果 当选中的时候就全选。否者就全不选