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

上优

已于 2023-08-19 16:52:42 修改

阅读量927

点赞数 1

文章标签： vue.js javascript 前端

于 2023-08-19 15:36:31 首次发布

本文链接：https://blog.csdn.net/weixin_65084919/article/details/132380600

版权

在这里插入图片描述

<!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>

上优

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
通过点击el-table内的某个值触发el-tree的click

/ 获取点击的tree节点。// 触发tree点击事件。'执行tree的点击事件'// 展开tree节点。'三级 1-1-1''三级 1-1-1''三级 1-1-2'
复制链接

扫一扫