表格和树结构双向锚点

最新推荐文章于 2024-01-09 17:32:22 发布

阿月coding

最新推荐文章于 2024-01-09 17:32:22 发布

阅读量360

点赞数 1

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/yinmingyue1999/article/details/127873611

版权

该博客介绍了如何实现在左侧树形结构中点击节点时，右侧表格滚动到对应数据行，并高亮显示。同时，当表格滑动时，树形结构会自动高亮与当前行匹配的节点。主要涉及的技术包括Vue的el-tree组件和el-table组件，通过事件监听和数据处理实现了双向同步效果。

摘要由CSDN通过智能技术生成

左边为树，右边为表格。

功能介绍：左边点击树结构对应结点的时候，会跳转到表格对应锚点的位置的数据；右边滑动表格时，鼠标落在表格的哪一行，对应的树结构锚点会高亮。

1.点击树，表格滑动到对应锚点

<el-tree v-loading="loading"
         class="deptTree"
         ref="deptTree"
         highlight-current
         :data="catalogueList"
         accordion
         @node-click="nodeClick"
         :expand-on-click-node="false"
         check-strictly
         :props="deptTree.mapping"
         :node-key="deptTree.mapping.nodeKey"
         :default-expand-all="true">
           <span class="custom-tree-node" slot-scope="{ node }">
            <div style="float: left">
                <span>{{ node.label }}</span>
              </div>
            </span>
        </el-tree>

	//节点点击事件
    nodeClick(data) {
      const selected = this.tableData.find(item => item.index === data.code);
      this.searchMember(selected);
    },
    // 跳转表格指定位置
    searchMember(data) {
      // 遍历表格数据，获取查询的数据
      if (this.tableData && this.tableData.length > 0) {
        // eslint-disable-next-line no-plusplus
        for (let i = 0; i < this.tableData.length; i++) {
          const item = this.tableData[i];
          // 判断查询的数据是否存在，存在则进行定位操作         
           if (item.index === data.index) {
           //需要找到$refs里的bodyWrapper这个属性
            this.$refs.table.getElTable().bodyWrapper.scrollTop = 52 * (i - 1);
            this.$refs.table.setCurrentRow(item);
            break;
          }
        }
      }
    }

2.滑动表格，滑动到的位置的对应锚点的树节点会高亮显示

//el-table中的这个方法
@cell-mouse-enter="enter"

	//遍历树结构
    enter(val) {
      this.enterVal(this.catalogueList, val);
    },
    enterVal(Array, val) {
      Array.forEach(ele => {
        if (val.index === ele.code) {
        	//发现对应锚点，则高亮
          this.$refs.deptTree.setCurrentKey(ele);
        }
        if (ele.children) {
          this.enterVal(ele.children, val);
        }
      });
    }