Nuxt.js+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>

效果展示

• 点赞
• 收藏
• 分享
• 文章举报