子组件:
<template>
<li class="tree-node">
<h3 class="tree-node-name">{{data.name}}</h3>
// 点击展示或隐藏
<span class="drop-down" :class="{'drop-down-turn':!isShow}" @click="clickToggle"></span>
<ul v-for="(item,index) in data.children" :key="index" class="tree-item" v-if="isShow">
<tree-node v-if="item.children" :data="item" @click-item="clickItem"></tree-node>
// 最里面一层数据可以选中,单独设置样式
<li v-if="item.children" @click="clickItem(item)">
<span :class="{'check-item': !item.children, 'active': item.checked}"></span>
</li>
</ul>
</li>
</template>
export default {
name:'tree-node',
components: {},
props: {
data: {
type: Object,
default() {
return {};
}
}
},
data() {
return {
// 是否显示
isShow: true
};
},
methods: {
// 点击条目
clickItem(item) {
this.$emit('click-item', item);
},
// 切换显示与隐藏
clickToggle() {
this.isShow = !this.isShow;
}
}
};
父组件:
<div v-for="(item,index) in dataList" :key="index">
<treeNode :data="item" @click-item="clickItem"></treeNode>
</div>
methods: {
// 点击条目
clickItem(item) {
item.checked = !item.checked;
}
}
20220218修改:
子组件:
<template>
<li class="fd-tree-node">
<h3 @click="clickItem(data)">{{data.name}}</h3>
<ul v-for="(item,index) in data.children" :key="index">
<tree-node v-if="item.children"
:class="{'no-children-item':!item.children.length, 'active': item.checked}"
:data="item" @click-item="clickItem(item,index)"></tree-node>
</ul>
</li>
</template>
export default {
name:'tree-node',
components: {},
props: {
data: {
type: Object,
default() {
return {};
}
}
},
methods: {
// 点击条目
clickItem(item) {
this.$emit('click-item', item);
}
}
};
父组件:
<div v-for="(item,index) in dataList" :key="index" >
<treeNode :data="item" @click-item="clickItem"></treeNode>
</div>
// 获取树的数据
getTreeData() {
this.requestGetTreeList()
.then((data) => {
this.dataList = data.data;
this.operateData(this.dataList);
});
},
// 处理数据
operateData(data) {
const _dataList = JSON.parse(JSON.stringify(data));
// 循环真实数据
_dataList.forEach((item) => {
// 递归数据
this.singleRecusion(item, null);
});
// 所有数据列表
this.dataList = _dataList;
},
// 递归数据
singleRecusion(item, itemP) {
// 父节点id
item.pId = itemP ? itemP.id : '-1';
// 父节点名称
item.pName = itemP ? itemP.name : '';
// id 索引集合
item.ids = itemP ? `${itemP.ids}>${item.id}` : item.id;
// 循环子集
if (Array.isArray(item.children) && item.children.length > 0) {
// 子集循环
item.children.forEach((itemC) => {
// 增加checked字段
itemC.checked = false;
// 递归
this.singleRecusion(itemC, item);
});
} else {
item.children = [];
}
if (item.children.length === 0) {
// 转成一维数组
this.oneDimensionalDataList.push(item);
}
},
// 点击条目
clickItem(item) {
item.checked = !item.checked;
// 已选中
if (item.checked) {
this.checkedList.push(item);
} else {
// 未选中
const _index = this.checkedList.findIndex((val) => val.name === item.name);
this.checkedList.splice(_index, 1);
}
},