通过点击el-table内的某个值触发el-tree的click

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>
相关推荐
weixin_BYSJ19876 分钟前
【计算机毕设】基于Spring_Boot_Vue的马拉松报名与选手成绩追踪系统05445
java·vue.js·spring boot·学习·spring·django·课程设计
薛一半17 分钟前
Redux实战:组件状态管理全解析
开发语言·前端·javascript·react.js
风骏时光牛马27 分钟前
功能模块性能测试用例验证
前端
对空六课2 小时前
两个统计平台数据不同:用同一时间窗和事件样本做差异定位
大数据·前端·网络·数据库
lpfasd12310 小时前
node-sass 停止维护!老项目迁移 Dart Sass 完整教程
前端·rust·sass
Data analyse45612 小时前
rnweb 回放数据量太大怎么办?分片存储与断点续传的实现思路
前端·网络·算法·数据分析
xiaogai_gai12 小时前
金蝶收料通知单查询策略实战教程:从源系统拉取到中间层落地的完整路径
java·前端·数据库
环境栈笔记13 小时前
指纹浏览器 WebRTC 怎么设置?从 ICE 候选、代理出口到功能验证
前端·人工智能·后端·自动化
赵大仁13 小时前
官网性能优化实战:LCP 3.2s → 2.1s、CLS 0.107 → 0,以及被我推翻的 6 个判断
前端·性能优化·cls·lcp·core web vitals
xiancai_xianyu13 小时前
Text2SQL落地生产库前,SQL要过哪三道闸
前端·数据库·sql·sql注入·text2sql·ai agent开发·企业级ai框架