マルチレベルチェックボックス実装vue

HTMLセクション

 
js部分

export default {
  name: "Multistage_check",
  data() {
    return {
      allCheack: false,
      list: [
        {
          name: "  1",
          list: [
            {
              name: "  1",
              IsCheack: false,
              list: [
                { name: "  1", IsCheack: false },
                { name: "  2", IsCheack: false }
              ]
            },
            {
              name: "  2",
              IsCheack: false,
              list: [
                { name: "  1", IsCheack: false },
                { name: "  2", IsCheack: false }
              ]
            }
          ]
        },
        {
          name: "  2",
          list: [
            {
              name: "  1",
              IsCheack: false,
              list: [
                { name: "  1", IsCheack: false },
                { name: "  2", IsCheack: false }
              ]
            },
            {
              name: "  2",
              IsCheack: false,
              list: [
                { name: "  1", IsCheack: false },
                { name: "  2", IsCheack: false }
              ]
            }
          ]
        }
      ]
    };
  },
  components: {},
  created() {},
  mounted() {},
  methods: {
    //     
    selAll(list) {
      let that = this;
      if (that.allCheack) {
        list.map((val1, index1) => {
          val1.IsCheack = true;
          val1.list.map((val2, index2) => {
            val2.IsCheack = true;
            val2.list.map((val3, index3) => {
              val3.IsCheack = true;
            });
          });
        });
      } else {
        list.map((val1, index1) => {
          val1.IsCheack = false;
          val1.list.map((val2, index2) => {
            val2.IsCheack = false;
            val2.list.map((val3, index3) => {
              val3.IsCheack = false;
            });
          });
        });
      }
    },
    
    //     
    selRow1(item) {
      let that = this;
      /*
      //    
      if (item.IsCheack) {
        //     
        item.list.map((val1, index1) => {
          val1.IsCheack = true;
          val1.list.map((val2, index2) => {
            val2.IsCheack = true;
          });
        });

        let pan_row1 = that.list.every(function(val, index, arr) {
          return val.IsCheack == true;
        });
        if (pan_row1) {
          that.allCheack = true;
        }
      } else {
        that.allCheack = false;

        item.list.map((val1, index1) => {
          val1.IsCheack = false;
          val1.list.map((val2, index2) => {
            val2.IsCheack = false;
          });
        });
      }
      */

      if (item.IsCheack) {
        //     
        item.list.map((val1, index1) => {
          val1.IsCheack = true;
          val1.list.map((val2, index2) => {
            val2.IsCheack = true;
          });
        });
      } else {
        item.list.map((val1, index1) => {
          val1.IsCheack = false;
          val1.list.map((val2, index2) => {
            val2.IsCheack = false;
          });
        });
      }

      let pan_row1 = that.list.every(function(val, index, arr) {
        return val.IsCheack == true;
      });
      if (pan_row1) {
        that.allCheack = true;
      } else {
        that.allCheack = false;
      }
    },

    //     
    selRow2(item, item1) {
      let that = this;
      /*
      //    
      if (item1.IsCheack) {
        item1.list.map((val1, index1) => {
          val1.IsCheack = true;
        });

        let pan_row2 = item.list.every(function(val, index, arr) {
          return val.IsCheack == true;
        });
        if (pan_row2) {
          item.IsCheack = true;
        }

        let pan_row1 = that.list.every(function(val, index, arr) {
          return val.IsCheack == true;
        });
        if (pan_row1) {
          that.allCheack = true;
        }
      } else {
        that.allCheack = false;
        item.IsCheack = false;
        item1.list.map((val1, index1) => {
          val1.IsCheack = false;
        });
      }

      */

      if (item1.IsCheack) {
        item1.list.map((val1, index1) => {
          val1.IsCheack = true;
        });
      } else {
        item1.list.map((val1, index1) => {
          val1.IsCheack = false;
        });
      }

      let pan_row2 = item.list.every(function(val, index, arr) {
        return val.IsCheack == true;
      });
      if (pan_row2) {
        item.IsCheack = true;
      } else {
        item.IsCheack = false;
      }

      let pan_row1 = that.list.every(function(val, index, arr) {
        return val.IsCheack == true;
      });
      if (pan_row1) {
        that.allCheack = true;
      } else {
        that.allCheack = false;
      }
    },

    //      
    selRow3(item, item1, item2) {
      let that = this;
      /*
      if (item2.IsCheack) {
        let pan_row3 = item1.list.every(function(val, index, arr) {
          return val.IsCheack == true;
        });
        if (pan_row3) {
          item1.IsCheack = true;
        }

        let pan_row2 = item.list.every(function(val, index, arr) {
          return val.IsCheack == true;
        });
        if (pan_row2) {
          item.IsCheack = true;
        }

        let pan_row1 = that.list.every(function(val, index, arr) {
          return val.IsCheack == true;
        });
        if (pan_row1) {
          that.allCheack = true;
        }
      } else {
        that.allCheack = false;
        item.IsCheack = false;
        item1.IsCheack = false;
      }

      */
      let pan_row3 = item1.list.every(function(val, index, arr) {
        return val.IsCheack == true;
      });
      if (pan_row3) {
        item1.IsCheack = true;
      } else {
        item1.IsCheack = false;
      }

      let pan_row2 = item.list.every(function(val, index, arr) {
        return val.IsCheack == true;
      });
      if (pan_row2) {
        item.IsCheack = true;
      } else {
        item.IsCheack = false;
      }

      let pan_row1 = that.list.every(function(val, index, arr) {
        return val.IsCheack == true;
      });
      if (pan_row1) {
        that.allCheack = true;
      } else {
        that.allCheack = false;
      }
    },

    //    
    fliterValue() {
      let that = this;
      //                
      let resstr = JSON.stringify(that.list);
      let res = JSON.parse(resstr);

      let row1list = res.filter(function(val, index, arr) {
        let row2list = val.list.filter((val2, index2) => {
          //      
          let row3list = val2.list.filter((val3, index3) => {
            return val3.IsCheack;
          });
          val2.list = row3list;
          //    
          return row3list.length != 0;
        });

        val.list = row2list;
        //    
        return row2list.length != 0;
      });

      console.log(row1list);

      that.extractionData(row1list);
    },

    //    
    extractionData(row1list) {
      let resstr = JSON.stringify(row1list);
      let res = JSON.parse(resstr);
      let arr = []; //     
      //    ------         
      // arr = ["  1", "  2"];

      //    ------         
      // arr = ["  1", { name: "  2", list: ["  1", "  2"] }];

      //    ------           
      // arr = [
      //   "  1",
      //   {
      //     name: "  2",
      //     list: ["  1", { name: "  2", list: ["  1", "  2"] }]
      //   }
      // ];

      let arr_str = "";
      res.map((val1, index1) => {
        console.log(val1.IsCheack);
        if (val1.IsCheack) {
          arr.push(val1.name);

          arr_str += val1.name + "、";
        } else {
          let arr1 = [];
          let arr1_str = "";

          val1.list.map((val2, index2) => {
            if (val2.IsCheack) {
              arr1.push(val2.name);

              arr1_str += val2.name + "-";
            } else {
              let arr2 = [];
              let arr2_str = "";

              val2.list.map((val3, index3) => {
                if (val3.IsCheack) {
                  arr2.push(val3.name);

                  arr2_str += val3.name + ";";
                }
              });

              arr1.push({
                name: val2.name,
                list: arr2
              });

              arr1_str += val2.name + "-" + arr2_str;
            }
          });

          arr.push({
            name: val1.name,
            list: arr1
          });
          arr_str += val1.name + "-" + arr1_str;
        }
      });

      console.log(arr);
      console.log(arr_str);
    }
  },

  //    
  computed: {},

  watch: {}
};

 
css部分