# 前言最近在开发中遇到了一个需求,是将两组**树形结构**的数据通过**连线**进行**关联映射**。 what?连线功能?还是两组树形结构??? 让我头疼的并非连线而是对树形结构的展示,我需要一个能够清晰的展示树形结构的关系和每条数据里的详细数据的组件,就这样el-table走进了我的视野里。 # 准备工作所用插件: "element-plus" + "jsplumb" npm install 就完事 # 第一步: 定义静态数据并显示table组件新建一个`line.vue`文件,定义一个id为`container`的div标签,在这个标签内放入两个el-table,并根据定义的静态数据进行基础的配置。需要注意的是el-table当 row 中包含 `children` 字段时，被视为树形数据。渲染嵌套数据需要 prop 的 `row-key`。具体见下面代码: `````` `````` ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bf1a9d06d495419a97b7b29c7aeca8fc~tplv-k3u1fbpfcp-watermark.image?) # 第二步: 初始化jsPlumb并设置可以连线的元素引入jsplumb 并创建jsplumb实例，实例中大部分的配置主要是对箭头的样式配置,具体参数信息可以查看官网。 ``` import { jsPlumb } from 'jsplumb' let instance = null; function init() { instance = jsPlumb.getInstance({ Connector: "Straight", //连接线形状 Bezier: 贝塞尔曲线 Flowchart: 具有90度转折点的流程线 StateMachine: 状态机 Straight: 直线 PaintStyle: { strokeWidth: 3, stroke: "#dfbee7" }, //连接线样式 Endpoint: ["Blank", { radius: 1 }], //端点 anchor: 'Right', // 绘制箭头 Overlays: [['Arrow', { width: 12, length: 12, location: 1 }]], EndpointStyle: { fill: "#000000" }, //端点样式 Container: "container", //目标容器id ListStyle: { endpoint: ["Rectangle", { width: 30, height: 30 }], }, }); } ``` 由于业务的需求是只能从左侧的数据连接到右侧的数据,并且有子项的那一行不能进行连接操作，所以我这边要将左侧的每行数据设置为起点右侧为终点并过滤那些有子项的行,而设置起点和终点需要拿到对应的元素或者标识,这时我们就需要给`el-table`的`row`设置`class名` ``` ``` 我这里设置了两个类名 `leftRow` 和 `rightRow` 来区分他是左侧还是右侧的行,`Id-${row.id}`作为唯一标识让我们能获取到某一行元素 ``` // 设置可以连线的元素 function setContainer() { const leftElList = document.querySelectorAll('.leftRow'); // 左侧行元素集合 const rightElList = document.querySelectorAll('.rightRow'); // 右侧行元素集合 // 将dom元素设置为连线的起点或者终点设置了起点的元素才能开始连线设置为终点的元素才能为连线终点 instance.batch(function () { [leftElList, rightElList].forEach((trList, index) => { trList.forEach((tr) => { const id = interceptId(tr.classList[2]); if (index === 0) { const item = leftData.value.find(i => i.id == id); // 判断是否有子项,若没有则设置为起点 !item?.hasChild && instance.makeSource(tr, { allowLoopback: false, anchor: ["Right"], // 设置端点位置 maxConnections: 1 }); } else { const item = rightData.value.find(i => i.id == id); // 判断是否有子项,若没有则设置为终点 !item?.hasChild && instance.makeTarget(tr, { anchor: ["Left"], maxConnections: 1 }); } }); }); }); } // 截取元素类名中的id const interceptId = className => { return className.slice(className.indexOf('-') + 1); } ``` 然后我们在`onMounted`中调用这些方法就可以实现连线功能了 ``` const initJsPlumb = () => { jsPlumb.ready(function () { // 初始化jsPlumb 创建jsPlumb实例 init(); // 设置可以为连线起点和连线终点的元素 setContainer(); }); } onMounted(() => { initJsPlumb(); }) ``` ![连接.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/111d06d6faa74210af29b0fa77afcf11~tplv-k3u1fbpfcp-watermark.image?) 看！成功啦！ # 设置默认连线和删除连线功能 ``` const relationship = reactive([ {sourceId: 4, targetId: 8} ]) // 设置默认连线 function setConnect(relationship) { setTimeout(() => { relationship.forEach(function (data) { // source是连线起点元素id target是连线终点元素id instance.connect({ source: document.querySelector(`.Id-${data.sourceId}`), target: document.querySelector(`.Id-${data.targetId}`) }); }); }) } // 绑定事件监听 function setEvent() { // 连线事件 instance.bind("connection", function (connInfo, originalEvent) { // connInfo是jsPlumb对象可以打印出来康康有哪些东西 console.log(connInfo, originalEvent, 'connInfo') }); // 点击连接线删除该条线 instance.bind('click', function (connection, originalEvent) { instance.deleteConnection(connection); }) } const initJsPlumb = () => { jsPlumb.ready(function () { // 初始化jsPlumb 创建jsPlumb实例 init(); // 设置可以为连线起点和连线终点的元素 setContainer(); // 设置默认连线 setConnect(relationship); // 绑定事件监听 setEvent(); }); } onMounted(() => { initJsPlumb(); }) ``` 将上述代码中的两个函数一并放入到`initJsPlumb`函数中执行即可 # 禁用el-table的expand功能由于数据的结构是树结构所以`el-table`在对含有子节点的行的最左侧添加了`展开`和`收起`功能的一个图标按钮,所以当我们点击它收缩后会改变原有的视图结构,而`jsplumb`是用`canvas`绘制的线条,它的位置并不能实时更改,所以我的解决方案是利用`el-table`的`expand-change`事件监听配合`toggleRowExpansion`方法实现不管用户怎么操作都是展开的状态。 ![连接01.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/455adaaf859c4e55a0bbdbaa86788527~tplv-k3u1fbpfcp-watermark.image?) ```

``` # 结言以上就是我对el-table和jsplumb的组合使用,欢迎广大朋友们讨论。