前端实现连线功能 vue中el-table和jsplumb实现连线功能 两张表连接

### 使用 `el-table` 和 jsPlumb 实现两个表格间动态连线 #### 安装依赖库 为了在 Vue 项目中集成 `el-table` 和 jsPlumb，需安装必要的 npm 包。 ```bash npm install element-ui jsplumb vue-jsplumb --save ``` #### 创建基础结构 定义两个独立的 `el-table` 表格实例用于展示数据源。通过自定义列模板来嵌入可交互元素作为连接端点。 ```html <template> <div id="app"> <!-- Table A --> <el-table :data="tableAData" style="width: 100%"> <el-table-column label="ID" prop="id"></el-table-column> <el-table-column label="Name" prop="name"></el-table-column> <el-table-column label="Action"> <template slot-scope="scope"> <span class="connection-point" ref="sourcePoint">{{ scope.$index }}</span> </template> </el-table-column> </el-table> <!-- Table B --> <el-table :data="tableBData" style="margin-top: 20px;width: 100%;"> <el-table-column label="ID" prop="id"></el-table-column> <el-table-column label="Description" prop="description"></el-table-column> <el-table-column label="Target Action"> <template slot-scope="scope"> <span class="target-point" ref="targetPoint">{{ scope.$index }}</span> </template> </el-table-column> </el-table> </div> </template> ``` #### 初始化 JsPlumb 连接逻辑 利用生命周期钩子函数，在组件挂载完成后初始化 jsPlumb 并设置两端点之间的连接规则。 ```javascript <script> import { ElTable, ElTableColumn } from 'element-ui'; import jsPlumb from "jsplumb"; export default { components: { ElTable, ElTableColumn }, data() { return { tableAData: [ {"id": 1,"name":"Alice"}, {"id": 2,"name":"Bob"} ], tableBData: [ {"id": 101,"description":"Item One"}, {"id": 102,"description":"Item Two"} ] }; }, mounted(){ this.initJsPlumb(); }, methods:{ initJsPlumb(){ const instance = jsPlumb.getInstance({ Container:"app" }); // 设置默认样式 let connectorPaintStyle = { lineWidth: 4, stroke: "#5C9DD2", joinstyle: "round"}; // 获取所有 source point 节点并为其添加拖拽事件监听器 Array.from(document.querySelectorAll('.connection-point')).forEach((item,idx)=>{ instance.addEndpoint(item,{ anchor:["Right"], isSource:true, maxConnections:-1, paintStyle:{ fill:"#5C9DD2", radius:7 } }); item.addEventListener('click', ()=>{ console.log(`Clicked on Source Point ${idx}`); }) }) // 同样处理 target points... Array.from(document.querySelectorAll('.target-point')).forEach((item,idx)=>{ instance.addEndpoint(item,{ anchor:["Left"], isTarget:true, dropOptions:{ hoverClass:'hover' }, paintStyle:{ fill:"#D25C8F",radius:7} }); item.addEventListener('dblclick',(e)=>{ e.preventDefault(); // 取消双击选中文本行为 console.log(`Double Clicked Target Point ${idx}`) }) }) // 建立初始连接 (可根据实际需求调整) instance.connect({uuids:[this.$refs.sourcePoint[0].getAttribute('jtk_uid'),this.$refs.targetPoint[0].getAttribute('jtk_uid')]},connectorPaintStyle); } } }; </script> ``` #### 添加 CSS 样式优化显示效果 为了让界面更加美观友好，可以适当增加一些额外的CSS样式修饰各个部分。 ```css <style scoped> .connection-point,.target-point{ cursor:pointer; display:inline-block; width:2em;height:2em;line-height:2em;text-align:center;border-radius:50%; } /* 更改鼠标悬停时的颜色 */ .connection-point:hover{background-color:#BBDEFB;} .target-point:hover{background-color:#FFCDD2;} .oTree >>> .org-tree-node-label-inner { white-space: nowrap; background-color: white; border-radius: 5px; padding: 10px 20px; border: 2px #ccc solid; }[^3] #app { font-family:Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:#2c3e50;margin-top:60px; } </style> ```