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>
           

效果展示