前言

近期挪动端我的项目中遇到个需要，数据须要树形显示。找了一些插件感觉不太适宜，就看了看相干文章以及视频，想着以学习和积攒的态度，就本人封装了个tree的树形展现组件。学习到了组件在它的模板内能够递归地调用本人，间接上代码吧~

子组件代码

<template>  <div class="experTree">    <ul v-for="item in data" :key="item.name">      <li class="experTree_info">        <div class="experTree_bar" @click="onOpenHandler">          <img            v-if="isHaschildren(item)"            src="@/assets/images/expert-right.png"            alt=""            class="icon"            :class="on_off ? 'vertical' : 'normal'"          />          <div v-if="!isHaschildren(item)" class="icon"></div>          <span> {{ item[label] }} </span>        </div>        <div class="experTree_select" @click="onSelectHandler(item)">抉择</div>      </li>      <exper-tree        v-show="on_off"        v-if="isHaschildren(item)"        :data="item[children]"        :defaultProps="defaultProps"      ></exper-tree>    </ul>  </div></template><script>export default {  name: "experTree",  props: {    data: {      type: [Object, Array],      required: true    },    defaultProps: {      type: Object,      default: () => {        return {          children: "children",          label: "label"        };      }    }  },  data() {    return {      on_off: false    };  },  computed: {    label() {      return this.defaultProps.label;    },    children() {      return this.defaultProps.children;    },    isHaschildren() {      return data => {        return data[this.children] && data[this.children].length;      };    }  },  methods: {    onOpenHandler() {      this.on_off = !this.on_off;    },    onSelectHandler(item) {      this.$emit("onSelectHandler", item);    }  }};</script><style lang="scss" scoped>.anime_time {  transition: all 0.3s;}.dis_flex {  display: flex;  align-items: center;}.experTree {  &_info {    @extend .dis_flex;    height: 48px;    justify-content: space-between;    .experTree_bar {      @extend .dis_flex;      height: 100%;      flex: 1;      .icon {        width: 38px;        height: 38px;        &.vertical {          transform: rotate(90deg);          @extend .anime_time;        }        &.normal {          @extend .anime_time;        }      }    }    .experTree_select {      color: $mainColor;      padding: 5px;      box-sizing: border-box;    }  }}</style>

父组件调用

<template>   <div class="tree-menu">     <expert-tree       :data="list"       :defaultProps="defaultProps"       @onSelectHandler="onSelectHandler"     ></expert-tree>   </div></template><script>import expertTree from "./expert_tree.vue";let list = [  {    name: "Web秀",    children: [      {        name: "web前端",        children: [          {            name: "CSS"          },          {            name: "JavaScript"          },          {            name: "Vue"          },          {            name: "小程序"          },          {            name: "Three.js"          }        ]      },      {        name: "服务器"      },      {        name: "工具类"      }    ]  },  {    name: "今日头条",    children: [      {        name: "图片"      },      {        name: "新闻",        children: []      }    ]  },  {    name: "Angular"  }];export default {  name: "selectSector",  components: { expertTree },  data() {    return {      list: [...list],      defaultProps: {        children: "children",        label: "name"      }    };  },  methods: {    onSelectHandler(data) {      console.log(data, "expert_tree");    }  }};</script><style lang="scss" scoped></style>

结尾

有写的有余的中央心愿大家多提提意见，目前本人的技术的确不怎么样，心愿跟各位大佬多多沟通交流，共同进步。早日跟上各位前辈的步调~