|
|
@@ -0,0 +1,89 @@
|
|
|
+<template>
|
|
|
+ <el-collapse v-model="activeNames">
|
|
|
+ <recursive-tree :data="treeData" />
|
|
|
+ </el-collapse>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ props: {
|
|
|
+ treeData: {
|
|
|
+ type: Array
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ activeNames: ["1"]
|
|
|
+ // treeData: [
|
|
|
+ // {
|
|
|
+ // title: "节点1",
|
|
|
+ // content: "内容1",
|
|
|
+ // children: [
|
|
|
+ // {
|
|
|
+ // title: "节点1-1",
|
|
|
+ // content: "内容1-1"
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // title: "节点1-2",
|
|
|
+ // content: "内容1-2",
|
|
|
+ // children: [
|
|
|
+ // {
|
|
|
+ // title: "节点1-2-1",
|
|
|
+ // content: "内容1-2-1"
|
|
|
+ // }
|
|
|
+ // ]
|
|
|
+ // }
|
|
|
+ // ]
|
|
|
+ // }
|
|
|
+ // // ... 可以添加更多节点
|
|
|
+ // ]
|
|
|
+ };
|
|
|
+ },
|
|
|
+ components: {
|
|
|
+ "recursive-tree": {
|
|
|
+ props: ["data"],
|
|
|
+ // template: `
|
|
|
+ // <div>
|
|
|
+ // <el-collapse-item
|
|
|
+ // v-for="(item, index) in data"
|
|
|
+ // :key="index"
|
|
|
+ // :name="item.title"
|
|
|
+ // >
|
|
|
+ // <template slot="title">{{ item.title }}</template>
|
|
|
+ // {{ item.content }}
|
|
|
+ // <recursive-tree v-if="item.children" :data="item.children" />
|
|
|
+ // </el-collapse-item>
|
|
|
+ // </div>
|
|
|
+ // `
|
|
|
+ template: `
|
|
|
+ <div>
|
|
|
+ <el-collapse-item
|
|
|
+ v-for="(litem, index) in data"
|
|
|
+ :key="litem.scxbsm"
|
|
|
+ :name="litem.title"
|
|
|
+ >
|
|
|
+ <template slot="title">
|
|
|
+ {{ litem.scxname }}{{ litem.children && litem.children.length }} ({{
|
|
|
+ litem.dataList && litem.dataList.length
|
|
|
+ }})
|
|
|
+ </template>
|
|
|
+ <div v-if="litem.scxstyle == '1'">
|
|
|
+ <div v-for="ldata in litem.dataList" :key="ldata.scxbsm">
|
|
|
+ <el-tooltip
|
|
|
+ v-if="ldata.yslx_name.length > 0"
|
|
|
+ :content="ldata.yslx_name"
|
|
|
+ placement="bottom-start"
|
|
|
+ >
|
|
|
+ <span class="legLabel">{{ ldata.yslx_name }}</span>
|
|
|
+ </el-tooltip>
|
|
|
+ <span>{{ ldata.mj }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <recursive-tree v-if="litem.children" :data="litem.children" />
|
|
|
+ </el-collapse-item>
|
|
|
+ </div>
|
|
|
+ `
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
Maxx