这里我就直接贴代码了,里面有一点点备注,哈哈哈
<template>
<div>
<div v-for="item in dataList">
<div
class="tree-row"
:class="selectTreeItem==item.id?'active-row':''"
@click="clickItem(item.id,item.queryData)"
>
<!-- 这里的item.isChecked可以自己递归在dataList写入true/false -->
<span
class="icon"
v-show="item.childrenList!=undefined&&(item.childrenList.length!=0)"
:class="item.isChecked?'expand-icon':'collapse-icon'"
@click="item.isChecked=!item.isChecked"
>
<!-- svg-icon 是另外一个组件,这里可以自己写icom -->
<svg-icon icon-class="trangle" class-name="triangle-icon"></svg-icon>
</span>
<span
v-show="item.childrenList!=undefined&&(item.childrenList.length!=0)"
class="folder-icon"
>
<svg-icon icon-class="folder" class-name="delete-circle-icon"></svg-icon>
</span>
<span
class="unit-icon-item"
v-show="item.childrenList==undefined||(item.childrenList.length==0)"
>
<svg-icon icon-class="unit" class-name="delete-circle-icon unit-icon"></svg-icon>
</span>
<span>{
{
item.itemName}}<i v-show="item.dataNum">{
{
' ('+item.dataNum+') '}}</i></span>
</div>
<!-- 自己嵌套自己 -->
<position-tree
class="child-level"
:selectTreeItem="selectTreeItem"
@clickItem="clickItem"
v-show="item.isChecked"
:dataList="item.childrenList"
></position-tree>
</div>
</div>
</template>
<script>
import positionTree from "@C/common/tree";
export default {
props: {
dataList: {
type: [Object, Array],
default: () => {
}
},
selectTreeItem: {
type: Number,
default: 0
}
},
name: "positionTree",
data() {
return {
};
},
components: {
positionTree
},
methods: {
// 这里设置的点击事件, this.$emit传递给父组件
clickItem(id,queryData) {
// console.log("click", id);
this.$emit("clickItem", id,queryData);
}
}
};
</script>
<style scoped>
</style>