vue中el-table和jsplumb实现连线功能

更新时间：2023年07月20日 16:01:50 作者：爱踢球的程序员

本文主要介绍了el-table和jsplumb实现连线功能，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

前言

最近在开发中遇到了一个需求,是将两组树形结构的数据通过连线进行关联映射。what?连线功能?还是两组树形结构???让我头疼的并非连线而是对树形结构的展示,我需要一个能够清晰的展示树形结构的关系和每条数据里的详细数据的组件,就这样el-table走进了我的视野里。

准备工作

所用插件: "element-plus" + "jsplumb"npm install 就完事

第一步: 定义静态数据并显示table组件

新建一个line.vue文件,定义一个id为container的div标签,在这个标签内放入两个el-table,并根据定义的静态数据进行基础的配置。需要注意的是el-table当 row 中包含 children 字段时，被视为树形数据。渲染嵌套数据需要 prop 的 row-key。具体见下面代码:

<template>
  <div class="line">
    <div id="container" style="display: flex; justify-content: space-between; position: relative">
      <el-table
        ref="leftTable"
        :data="leftTreeData"
        style="width: 40%; margin-bottom: 20px; display: inline-block;"
        row-key="id"
        border
        default-expand-all
      >
        <el-table-column prop="name" label="姓名"/>
        <el-table-column prop="gender" label="性别"/>
        <el-table-column prop="age" label="年龄"/>
      </el-table>
      <el-table
        ref="rightTable"
        :data="rightTreeData"
        style="width: 40%; margin-bottom: 20px; display: inline-block;"
        row-key="id"
        border
        default-expand-all
      >
        <el-table-column prop="name" label="姓名"/>
        <el-table-column prop="gender" label="性别"/>
        <el-table-column prop="age" label="年龄"/>
      </el-table>
    </div>
  </div>
</template>
<script setup>
  import { ref } from 'vue'
  // 左侧静态数据
  const leftData = ref([
    {id: 1, name: '张三', gender: '男', age: 23, parentId: null, hasChild: true},
    {id: 2, name: '李四', gender: '男', age: 22, parentId: null, hasChild: false},
    {id: 3, name: '坤坤', gender: '女', age: 24, parentId: 1, hasChild: true},
    {id: 4, name: '小黑子', gender: '男', age: 25, parentId: 3, hasChild: false},
  ]);
  const leftTreeData = ref([
    {
      id: 1, name: '张三', gender: '男', age: 23, parentId: null, children: [
        {id: 3, name: '坤坤', gender: '女', age: 24, parentId: 1, children: [
            {id: 4, name: '小黑子', gender: '男', age: 25, parentId: 3},
          ]
        },
      ]
    },
    {id: 2, name: '李四', gender: '男', age: 22, parentId: null},
  ]);
  // 右侧静态数据
  const rightData = ref([
    {id: 5, name: '柯洁', gender: '男', age: 23, parentId: null, hasChild: true},
    {id: 6, name: '战鹰', gender: '女', age: 30, parentId: 5, hasChild: false},
    {id: 7, name: '唱跳', gender: '男', age: 24, parentId: null, hasChild: false},
    {id: 8, name: 'rap', gender: '男', age: 25, parentId: null, hasChild: false},
  ]);
  const rightTreeData = ref([
    {id: 5, name: '柯洁', gender: '男', age: 23, parentId: null, children: [
        {id: 6, name: '战鹰', gender: '女', age: 30, parentId: 6},
      ]
    },
    {id: 7, name: '唱跳', gender: '男', age: 24, parentId: null},
    {id: 8, name: 'rap', gender: '男', age: 25, parentId: null},
  ]);
  const leftTable = ref(null);
  const rightTable = ref(null);
</script>

第二步: 初始化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名

<template>  
  <div class="line">  
    <div id="container" style="display: flex; justify-content: space-between; position: relative">  
      <el-table  
        ref="leftTable"  
        :data="leftTreeData"  
        :row-class-name="({row}) => `leftRow Id-${row.id}`"  
        style="width: 40%; margin-bottom: 20px; display: inline-block;"  
        row-key="id"  
        border  
        default-expand-all  
      >  
        <el-table-column prop="name" label="姓名"/>  
        <el-table-column prop="gender" label="性别"/>  
        <el-table-column prop="age" label="年龄"/>  
      </el-table>  
      <el-table  
        ref="rightTable"  
        :data="rightTreeData"  
        :row-class-name="({row}) => `rightRow Id-${row.id}`"  
        style="width: 40%; margin-bottom: 20px; display: inline-block;"  
        row-key="id"  
        border  
        default-expand-all  
      >  
        <el-table-column prop="name" label="姓名"/>  
        <el-table-column prop="gender" label="性别"/>  
        <el-table-column prop="age" label="年龄"/>  
      </el-table>  
    </div>  
  </div>  
</template>

我这里设置了两个类名 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

看！成功啦！

设置默认连线和删除连线功能

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

<el-table  
  ref="leftTable"  
  :data="leftTreeData"  
  :row-class-name="({row}) => `leftRow Id-${row.id}`"  
  style="width: 40%; margin-bottom: 20px; display: inline-block;"  
  row-key="id"  
  border  
  default-expand-all  
  @expand-change="(row, expanded) => !expanded && leftTable?.toggleRowExpansion(row)"
>  
  <el-table-column prop="name" label="姓名"/>  
  <el-table-column prop="gender" label="性别"/>  
  <el-table-column prop="age" label="年龄"/>  
</el-table>  
<el-table  
  ref="rightTable"  
  :data="rightTreeData"  
  :row-class-name="({row}) => `rightRow Id-${row.id}`"  
  style="width: 40%; margin-bottom: 20px; display: inline-block;"  
  row-key="id"  
  border  
  default-expand-all  
  @expand-change="(row, expanded) => !expanded && rightTable?.toggleRowExpansion(row)"
>  
  <el-table-column prop="name" label="姓名"/>  
  <el-table-column prop="gender" label="性别"/>  
  <el-table-column prop="age" label="年龄"/>  
</el-table>

结言

到此这篇关于el-table和jsplumb实现连线功能的文章就介绍到这了,更多相关el-table jsplumb连线内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

使用element-ui +Vue 解决 table 里包含表单验证的问题
这篇文章主要介绍了使用element-ui +Vue 解决 table 里包含表单验证的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-07-07
Vue (Vuex)中 store 基本用法
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化，这篇文章主要介绍了Vue 中 store 基本用法,需要的朋友可以参考下
2023-01-01
使用Vite+Vue3+TypeScript 搭建开发脚手架的详细过程
这篇文章主要介绍了Vite+Vue3+TypeScript 搭建开发脚手架的详细过程，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2023-02-02
vue升级之路之vue-router的使用教程
自动安装的vue-router，会在src 文件夹下有个一个 router -> index.js 文件在 index.js 中创建 routers 对象，引入所需的组件并配置路径。这篇文章主要介绍了vue-router的使用,需要的朋友可以参考下
2018-08-08
基于Vue3文件拖拽上传功能实现
这篇文章主要介绍了Vue3文件拖拽上传功能,支持拖拽到此区域上传，支持选择多个文件/文件夹，代码很简单，对vue3拖拽上传功能感兴趣的朋友一起看看吧
2022-10-10
vuejs实现下拉框菜单选择
这篇文章主要为大家详细介绍了vuejs实现下拉框菜单选择，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-10-10
使用proxytable 配置解决 vue-cli 的跨域请求问题【推荐】
这篇文章主要介绍了利用 proxytable 配置解决 vue-cli 的跨域请求问题,本文的目录结构基于 webpack 模板结构，需要的朋友可以参考下
2018-05-05
vue使用element-ui的el-input监听不了回车事件的解决方法
小编在使用element-ui时，el-input组件监听不了回车事件，怎么回事呢？下面小编给大家带来了vue使用element-ui的el-input监听不了回车事件的解决方法，一起看看吧
2018-01-01
vue封装组件之上传图片组件
这篇文章主要为大家详细介绍了vue封装组件之上传图片组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-10-10
vue的全局变量和全局拦截请求器的示例代码
这篇文章主要介绍了vue的全局变量和全局拦截请求器的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-09-09