树形递归组件

树形递归组件

基于vue.js的递归并利用Vant的Checkbox组件，实现满足多选，单选，全选与反选的树形选择组件
实现的功能：

1. 根据数据，可以无限延伸（利用递归）；
2. 选中父节点，其子节点都被选中；反选父节点，子节点都被取消选择；
3. 同级子节点都选，父节点会自动选中。
   
   1、treeCheck组件页面
   （1）html模块

<div class="treeCheck">
    <div
      v-for="(item,index) in tree"
      :key="index"
    >
      <!-- 判断是否有children -->   
      <Checkbox
        v-model="item.checked"
        :style="{margin:!item.children?'.1333rem 0 0.2667rem .5333rem':''}"
        shape="square"
        @click="()=>{click(item)}"
      >
        {{ item.text }}
      </Checkbox>
      <!-- 把tree数据的子集给tree ，再循环自己，这一步就是递归调用自己-->
      <treeCheck
        v-if="item.children"
        :tree="item.children"
      />
    </div>
  </div>

（2）script模块

export default {
    name: 'TreeCheck',      //组件名称
    components: { Checkbox, },    //引入了vant的checkbox组件
    // 父组件传入子组件数据
    props: {
      tree: {
        type: Array,
        default: () => [],  
      }
    },
    methods: {
      ...mapMutations(['saveCheckItem']),
      //父节点的checked状态，传递给子节点（全选反选）
      click(item) {
        if (item.children && item.children.length) {
          item.checked = !item.checked;
          if (item.checked) {
            item.children.forEach((item1) => {
              item1.checked = true;
            });
          } else {
            item.children.forEach((item1) => {
              item1.checked = false;
            });
          }
        }
        this.$emit('check', item);
        this.saveCheckItem(item);
      },    
    },
    data() {
      return {
      };
    },
    watch: { 
      tree: {
      //检测data数据是否变化（也即各checkbox的checked状态是否改变）
      //实现同级子节点都选择后，父节点自动选择
        handler(data) {
          if (data) {
            let result;
            data.forEach((item) => {
              if (item.children) {
                item.children.every((item1) => {
                  if (!item1.checked) {
                    result = false;
                    return false;
                  }
                  result = true;
                  return true;
                });
                item.checked = result;
              } 
            });
          }
        },
        //深拷贝
        deep: true
      }
    },

2、使用组件的vue页面

          <treeCheck :tree="tree" />

	data() {
      // 这里存放数据
      return {
      tree: [
          {
            checked: false,
            text: '试XXXXX', 
            children: [
              { checked: false, text: '试XXXXX' },
              { checked: false, text: '试XXXXX' },
              { checked: false, text: '安XXXXX' },
              { checked: false, text: '测XXXXX' },
              { checked: false, text: '场XXXXX' }
            ]
          },
          {
            checked: false,
            text: '总XXXXX', 
            children: [{ checked: false, text: '维XXXXX' }]
          }
        ]
        },
    }