Ant Design Vue树形控件组件

目的

Nuxt.js+Ant Design Vue实现树形控件组件

components\tree\tree.vue

H5代码块

<template>
  <div>
    <a-tree showLine defaultExpandAll @select="onSelect" :checkable="check">
      <a-tree-node key="0-0">
        <span slot="title" style="color: #1890ff">parent one</span>
        <a-tree-node v-for="(items,key) in treeTitle" :key="key" :title="items.title">
          <a-tree-node v-for="(item,key) in items.childTitle" :key="key" :title="item.title" />
        </a-tree-node>
      </a-tree-node>
    </a-tree>
  </div>
</template>

JS代码块

<script>
export default {
  name: 'Tree',
  props: {
    treeTitle: Array,
    check:Boolean
  },
  methods: {
    onSelect (selectedKeys, info) {
        console.log('selected', selectedKeys, info)
    },
  }
}
</script>

pages\nav\LogAudit.vue

H5代码块

<template>
    <div id="LogAudit">
      <tree :treeTitle="treeTitle"/>
      <tree :treeTitle="treeTitle" :check="true"/>
  </div>
</template>

JS代码块

<script>
import Tree from "~/components/tree/Tree";
const treeTitle=[{
  title:'parent1',
  childTitle:[{
      title:"版权名称",
    },{
      title:"版权名称2",
    },{
      title:"版权名称3",
    }],
  },{
  title:'parent2',
  childTitle:[{
      title:"版权名称4",
    },{
      title:"版权名称5",
    },{
      title:"版权名称6",
  }],
}];
export default {
  components:{
    Tree,
  },
  data() {
    return {
      treeTitle,
    }
  }
}
</script>

效果展示