多级选择组件

<!--
组件作用：选择列表
编写时间：2021/10/24 14:48
编写者：刘俊雄
-->


使用:
<menu-list :dataList="list" @menuChange="menuChangeFun" @selectChange="selectChangeFun"></menu-list>


<template>
  <view class="menu-warp">
    <view
      class="pd-10 mg-l-20"
      v-for="(item, index) in dataList"
      :key="index"
      @click.stop="menuClickFun(item, index)"
    >
      <view class="item-style pd-10">
        <text>{{ item.label }}</text>
        <text
          @click.stop="selectClickFun(item, index)"
          class="select-bj"
          :class="{ select: item.select }"
          >{{ item.select ? 1 : 0 }}</text
        >
        <!-- -->
      </view>

      <template v-if="item.children && item.is_show">
        <menu-list
          :dataList="item.children"
          @menuChange="menuChangeFun"
          @selectChange="selectChangeFun"
        ></menu-list> </template></view
  ></view>
</template>


</view>
</view>
</template>

<script>
export default {
  name: "menu-list",

  props: {
    dataList: Array,
  },

  data() {
    return {
      menuIndex: "",
    };
  },

  methods: {
    // 列表项点击事件 并触发 menuChange 事件
    menuClickFun(d, i) {
      // console.log('组件',d,i);
      this.menuIndex = i;
      if ("is_show" in d) {
        d.is_show = !d.is_show;
      }
      this.$emit("menuChange", d);
    },

    // 接收 menuChange 事件函数 并 继续向外层 触发 menuChange 事件
    menuChangeFun(d) {
      this.$emit("menuChange", d);
    },

    // 接收 selectChange 事件函数 并 继续向外层 触发 selectChange 事件
    selectChangeFun(d) {
      let status = d.status;
      let dataList = this.dataList[this.menuIndex];
      // console.log(d);
      // console.log(this.dataList);
      // console.log(this.menuIndex);
      // console.log(dataList);

      if (dataList.select !== status && dataList.children) {
        let is_select = false;
        for (var i = 0; i < dataList.children.length; i++) {
          if (dataList.children[i].select) {
            is_select = true;
            break;
          }
        }
        if (dataList.select !== is_select) {
          dataList.select = is_select;
        }
      }
      this.$emit("selectChange", { dataList, item: d, status });
    },

    // 选择点击事件 并 触发 selectChange 事件
    selectClickFun(d, i) {
      // console.log('选中',d,i);
      if (typeof this.menuIndex === "string") {
        this.menuIndex = i;
      }
      // console.log(this.menuIndex);
      // console.log(this.dataList);
      // console.log(this.dataList[i]);
      d.select = !d.select;
      // this.$emit('selectChange',{dataList:this.dataList,item:d});
      this.$emit("selectChange", {
        dataList: this.dataList[this.menuIndex],
        status: d.select,
      });
      d.children && this.deepSelectFun(d.children, d.select);
    },

    // 递归改变选中项的状态
    deepSelectFun(d, status) {
      for (var i = 0; i < d.length; i++) {
        d[i].select = status;
        d[i].children && this.deepSelectFun(d[i].children, status);
      }
    },
  },
};
</script>

<style>
.pd-10 {
  padding: 20rpx 0;
}
.mg-l-20 {
  margin-left: 20rpx;
}

.item-style {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #55aaff;
}
.select-bj {
  width: 40rpx;
  height: 40rpx;
  line-height: 40rpx;
  border: 2rpx solid #000000;
  text-align: center;
  font-size: 26rpx;
}
.select {
  color: red;
  border-color: red;
}

.item-children {
}
</style>