html
复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link
rel="stylesheet"
href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
/>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
<div style="display: flex">
<div style="width: 200px; padding: 20px">
<!-- 开启手风琴 -->
<!-- accordion -->
<el-tree
:data="data"
:props="defaultProps"
@node-click="handleNodeClick"
node-key="id"
:default-expanded-keys="defaultExpandedId"
ref="selfTree"
></el-tree>
</div>
<el-table :data="tableData" style="flex: 1">
<el-table-column prop="date" label="日期" min-width="180">
</el-table-column>
<el-table-column prop="name" label="姓名" min-width="180">
</el-table-column>
<el-table-column prop="label" label="地址" min-width="580">
<template #default="{row}">
<div @click.stop="showTreeChange(row.label)">{{row.label}}</div>
</template>
</el-table-column>
</el-table>
</div>
</div>
<script>
new Vue({
el: '#app',
data() {
return {
defaultExpandedId: [],
tableData: [
{
date: '2016-05-02',
name: '王小虎',
label: '三级 1-1-1',
},
{
date: '2016-05-04',
name: '王小虎',
label: '二级 2-1',
},
],
data: [
{
id: 1,
label: '一级 1',
children: [
{
id: 4,
label: '二级 1-1',
children: [
{
id: 9,
label: '三级 1-1-1',
},
{
id: 10,
label: '三级 1-1-2',
},
],
},
],
},
{
id: 2,
label: '一级 2',
children: [
{
id: 5,
label: '二级 2-1',
},
{
id: 6,
label: '二级 2-2',
},
],
},
],
defaultProps: {
children: 'children',
label: 'label',
},
};
},
methods: {
showTreeChange(e) {
let item = this.getIds(this.data, e);
if (Object.keys(item).length != 0) {
// 开启手风琴
// var nodes = this.$refs.selfTree.store.nodesMap;
// for (var i in nodes) {
// nodes[i].expanded = false;
// }
// 展开tree节点
this.defaultExpandedId = [item.id];
// 获取点击的tree节点
let node = this.$refs.selfTree.getNode(item);
// 触发tree点击事件
this.handleNodeClick(item, node);
}
},
getIds(arr, name) {
let result = {};
arr.forEach((item) => {
if (item.label == name) {
Object.assign(result, item);
}
if (item.children && item.children.length > 0) {
Object.assign(result, this.getIds(item.children, name));
}
});
return result;
},
handleNodeClick(e, node) {
console.log(e, node, '执行tree的点击事件');
},
},
});
</script>
</body>
</html>
