通过点击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>
相关推荐
风骏时光牛马7 分钟前
生成一个移动端标题,只需要一个标题,不需要其他的任何文本。
前端
IT_陈寒31 分钟前
Redis雪崩把我坑惨了,这是5年经验的教训
前端·人工智能·后端
SameX40 分钟前
HarmonyOS ArkUI List 的侧滑删除 用 ListItem 的 swipeAction + endIcon 的做法
前端
usdoc文档预览3 小时前
USDOC系列之PPT文件在线编辑-VUE前端实现在线浏览器在线编辑PPT文档
前端·vue.js·编辑器·office365·ppt在线编辑·office文件在线编辑·文件在线编辑
Java小卷3 小时前
面向 schema 编程,轻松搞定 Element 虚拟化表格复杂应用场景
vue.js·低代码·element
用户2705077725243 小时前
Agent 调工具卡住?3 种超时与取消策略实测对比
前端
LuHang4 小时前
我一行代码没写,把领导派的活做成了公司内部系统😭
前端
明月_清风4 小时前
Meta 开源了一个 AI Native 组件库:Astryx,150+ React 组件,专为 AI Agent 而设计
前端·人工智能·ai编程
仨孩子的爹4 小时前
Lodop、hiprint 与 vue-print-designer:打印控件选型对比
vue.js
用户850869276155 小时前
秒杀系统中 Shell 脚本并发控制 Bug:究竟哪里出了
前端