博客

效果

代码

组件

<template>
  <view class="">
    <view v-for="(item, index) in list" :key="index" class="tree_item">
      <view class="tree_item_content">
        <view class="tree_item_left" :style="treePaddingStyle">
          <view class="perch_box">
            <view
              @click.stop="cutExpand(item)"
              class="cut_icon_box"
              v-if="item.son && item.son.length"
            >
              <image
                v-if="!expandIdList.includes(item[classIdName])"
                src="@/pages/static/images/add2.png"
                mode="aspectFit"
              />
              <image
                v-else
                src="@/pages/static/images/del2.png"
                mode="aspectFit"
              />
            </view>
          </view>
        </view>
        <view class="tree_item_right">
          <view class="tree_item_content">
            <view class="tree_title">
              <text>{{ item.class_name }}</text>
            </view>
          </view>
        </view>
      </view>
      <view
        class="tree_child"
        v-if="
          item.son &&
          item.son.length &&
          expandIdList.includes(item[classIdName])
        "
      >
        <tree-item
          class="treeItem"
          :list="item.son"
          :treeClass="treeClass * 1 + 1"
          :expandIdList="expandIdList"
          :classIdName="classIdName"
          @getExpandIdList="getExpandIdList"
        ></tree-item>
      </view>
    </view>
  </view>
</template>
<script>
import treeItem from '@/pages/components/filterIndexComponents/treeItem.vue';

export default {
  components: {
    treeItem
  },
  name: 'tree-item',
  props: {
    list: {
      type: Array,
      default: () => {
        return [];
      }
    },
    // 当前 所属树状图数据 层数
    treeClass: {
      type: Number,
      default: 0
    },
    // 展开 tree id 列表
    expandIdList: {
      type: Array,
      default: () => {
        return [];
      }
    },
    classIdName: {
      type: String,
      default: 'product_class_id'
    }
  },
  data: () => ({}),
  computed: {
    treePaddingStyle() {
      return `padding-left:${(36 + 13) * this.treeClass}rpx;
      `;
    }
  },
  methods: {
    // 切换 展开 与 收起
    cutExpand(item) {
      let expandIdList = this.expandIdList;
      let id = item[this.classIdName];
      let expandIdListIndex = expandIdList.indexOf(id);
      if (expandIdListIndex != -1) {
        expandIdList.splice(expandIdListIndex, 1);
      } else {
        expandIdList.push(id);
      }
      this.$emit('getExpandIdList', expandIdList);
    },
    getExpandIdList(expandIdList) {
      this.$emit('getExpandIdList', expandIdList);
    }
  },
  watch: {},
  // 组件周期函数--监听组件挂载完毕
  mounted() {},
  // 组件周期函数--监听组件数据更新之前
  beforeUpdate() {},
  // 组件周期函数--监听组件数据更新之后
  updated() {},
  // 组件周期函数--监听组件激活(显示)
  activated() {},
  // 组件周期函数--监听组件停用(隐藏)
  deactivated() {},
  // 组件周期函数--监听组件销毁之前
  beforeDestroy() {}
};
</script>
<style lang="scss" scoped>
.tree_item {
  width: 100%;
  .tree_item_content {
    width: 100%;
    display: flex;
    &:hover {
      background: linear-gradient(
        90deg,
        rgba(240, 243, 251, 1),
        rgba(240, 243, 251, 0.4)
      );
    }
    .tree_item_left {
      height: 82rpx;
      box-sizing: border-box;
      display: flex;
      align-items: center;

      .cut_icon_box {
        width: 100%;
        height: 100%;
        background: #ffffff;
        border: 1rpx solid #dce1f1;
        border-radius: 9rpx;

        image {
          width: 100%;
          height: 100%;
        }
      }
    }
    .tree_item_right {
      flex-grow: 1;
      .tree_item_content {
        .tree_title {
          height: 82rpx;
          display: flex;
          align-items: center;
          color: #000;
          font-size: 27rpx;
        }
      }
    }
  }
  .tree_child {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    .treeItem {
      display: block;
      width: 100%;
    }
  }
  .perch_box {
    width: 36rpx;
    height: 36rpx;
    margin-right: 13rpx;
    margin-left: 5rpx;
    display: inline-block;
  }
}
</style>

传参

<treeItem
  class="treeItem"
  :list="cList"
  :classIdName="classIdName"
  :expandIdList="expandIdList"
  @getExpandIdList="getExpandIdList"
></treeItem>


	data:()=>({
	list:[
	{
  "class_id": "10",
  "class_name": "行驶系统",
  "pid": "2",
  "son": [
    {
      "class_id": "85",
      "class_name": "控制臂",
      "pid": "10",
      "son": [
        {
          "class_id": "664",
          "class_name": "摆臂",
          "pid": "85"
        },
        {
          "class_id": "665",
          "class_name": "摆臂胶",
          "pid": "85"
        },
      ]
    },
    {
      "class_id": "86",
      "class_name": "车桥和半轴",
      "pid": "10",
      "son": [
        {
          "class_id": "680",
          "class_name": "半轴油封盖",
          "pid": "86"
        },
        {
          "class_id": "681",
          "class_name": "半轴支架",
          "pid": "86"
        },
        {
          "class_id": "682",
          "class_name": "保修半轴",
          "pid": "86"
        }
      ]
    },
    {
      "class_id": "87",
      "class_name": "传动轴",
      "pid": "10",
      "son": [
        {
          "class_id": "683",
          "class_name": "传动轴",
          "pid": "87"
        },
        {
          "class_id": "684",
          "class_name": "传动轴垫",
          "pid": "87"
        },
        {
          "class_id": "685",
          "class_name": "传动轴吊胶",
          "pid": "87"
        },
        {
          "class_id": "690",
          "class_name": "传动轴支架",
          "pid": "87"
        }
      ]
    },
    {
      "class_id": "88",
      "class_name": "万向节",
      "pid": "10",
      "son": [
        {
          "class_id": "691",
          "class_name": "十字节",
          "pid": "88"
        }
      ]
    },
    {
      "class_id": "89",
      "class_name": "平衡杆",
      "pid": "10",
      "son": [
        {
          "class_id": "692",
          "class_name": "平衡杆",
          "pid": "89"
        }
        {
          "class_id": "697",
          "class_name": "平衡杆修理包",
          "pid": "89"
        }
      ]
    }
  ]
}]
}),
  computed: {
    cList() {
      let list = this.list;
      if (this.selectValue) {
        list = this.recursionSearch(this.list, this.selectValue);
      }
      return list;
    }
  },
  methods: {
    getExpandIdList(value) {
      this.expandIdList = [...new Set(value)];
    },
    recursionSearch(list, selectValue) {
      let slist = [];
      if (selectValue) {
        list.forEach((item, index) => {
          if (item.class_name && item.class_name.includes(selectValue)) {
            slist.push(item);
          }
          if (item.son && item.son.length) {
            let itemList = this.recursionSearch(item.son, selectValue);
            if (itemList && itemList.length) {
              slist.push(...itemList);
            }
          }
        });
      }
      return slist;
    },
 },