Ant Design Vue树形控件组件
目录导航目的实现方案H5代码块CSS代码块JS代码块数据效果展示目的实现方案H5代码块CSS代码块JS代码块数据效果展示
·
目的
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>
效果展示
更多推荐
已为社区贡献27条内容
所有评论(0)