< div class = "tree-top" > < span > 可选成员 < / span > < span > < i class = "el-icon-s-custom" / > { { peopleNum } } 人 < / span > < / div > < div class = "tree-content" > < el - input v - model = "filterText" placeholder = "请输入成员姓名" suffix - icon = "el-icon-search" < el - tree ref = "tree" : data = "treeData" node - key = "id" default - expand - all draggable : allow - drop = "allowDrop" : allow - drag = "allowDrag" : filter - node - method = "filterNode" @node - drag - start = "handleDragStart" @node - drag - end = "handleDragEnd" < span slot - scope = "{node,data}" class = "custom-tree-node" : style = "{cursor: node.data.type===1? 'move' : 'not-allowed'}" > < span v - if = "node.data.type===1" style = "margin-right: 5px;" > < i class = "el-icon-s-custom" / > < / span > < span > { { data . label } } < / span > < / span > < / el - tree > < / div >

 moveTrue: false, // 拖拽样式
      dialogAdd: false, // 选择人员框
      mode: 'transfer', // 注意fromData数据格式，必须完全一样，如果不一样，需要进行对应的更改*
      fromData: [
          id: '1',
          pid: 0,
          label: '一级 1',
          children: [
              id: '1-1',
              pid: '1',
              label: '二级 1-1',
              children: []
              id: '1-2',
              pid: '1',
              label: '二级 1-2',
              children: [
                  id: '1-2-1',
                  pid: '1-2',
                  children: [],
                  label: '二级 1-2-1'
                  id: '1-2-2',
                  pid: '1-2',
                  children: [],
                  label: '二级 1-2-2'
      toData: [],
      title: ['可选成员', '已选成员'],
      // 树拖拽
      treeData: [{
      }],
      rightList: [],
      filterText: '', // tree过滤
      signIndex: {}, // 拖拽标记
      peopleNum: 0
```watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
  mounted() {
  methods: {
    subPeople() { // 确定
      if (this.rightList.length > 0) {
        this.rightList.map(res => {
          res.memberId = res.id
          res.memberName = res.label
          res.memberDeptName = res.deptName
          res.memberPrivilege = 'view'
        this.$emit('subPeople', this.rightList)
        this.hide()
      } else {
        this.$message.error('成员添加不能为空！')
    hide() { // 取消
      this.rightList = []
      this.dialogAdd = false
    showView() {
      this.dialogAdd = true
    // 监听穿梭框组件添加
    add(fromData, toData, obj) {
      // 树形穿梭框模式transfer时，返回参数为左侧树移动后数据、右侧树移动后数据、移动的{keys,nodes,halfKeys,halfNodes}对象
      // 通讯录模式addressList时，返回参数为右侧收件人列表、右侧抄送人列表、右侧密送人列表
      // console.log("fromData:", fromData);
      // console.log("toData:", toData);
      // console.log("obj:", obj);
    // 监听穿梭框组件移除
    remove(fromData, toData, obj) {
      // 树形穿梭框模式transfer时，返回参数为左侧树移动后数据、右侧树移动后数据、移动的{keys,nodes,halfKeys,halfNodes}对象
      // 通讯录模式addressList时，返回参数为右侧收件人列表、右侧抄送人列表、右侧密送人列表
      // console.log("fromData:", fromData);
      // console.log("toData:", toData);
      // console.log("obj:", obj);
    handleDragStart(node, ev) { // 拖拽开始
      this.moveTrue = true
      // ev.dataTransfer.setData('text/plain', ev.target.innerText)
      // var img = new Image()
      // img.src = '@/assets/images/login-background.jpg'
      // ev.dataTransfer.setDragImage(img, 10, 10)
      // ev.dataTransfer.setDragImage(ev.path[0].lastElementChild.lastChild, 10, 10)
      ev.dataTransfer.setData('tree-item', JSON.stringify(node.data))
    handleDragEnd(draggingNode, endNode, position, event) { // 拖拽结束
      if (!draggingNode.data.disabled) {
        this.rightList.map(res => {
          if (this.rightList.length > 0 && res.id === draggingNode.data.id) {
            draggingNode.data.label = draggingNode.data.label + '（已添加）'
            draggingNode.data.disabled = true
      } else {
        this.$Message.error('成员已存在，不可重复添加！')
    allowDrop(draggingNode, dropNode, type) {
      return false
    allowDrag(draggingNode) { // 判定 最底层子集才能拖拽
      if (draggingNode.data.type === 1 && !draggingNode.data.disabled) {
        // 是否可用
        return draggingNode.data
      } else {
        return false
    drop(event) {
      const data = event.dataTransfer.getData('tree-item')
      this.rightList.push(JSON.parse(data))
      this.rightList = _.uniqBy(this.rightList, 'id')
    filterNode(value, data) { // 过滤
      if (!value) return true
      return data.label.indexOf(value) !== -1
    menuListFilter (arr) {
      arr.forEach(item => {
        if (item.disabled) {
          delete item.disabled
        if (item.children && item.children.length > 0) {
          this.menuListFilter(item.children)
    clearBtn() { // 一键清空
      this.rightList = []
      // this.menuListFilter(this.treeData)
      this.$emit('subPeopleTwo')
## 全部代码就在这里啦---很丝滑吧
## 因为我本地还有上页面的数据回显功能，所以上面有冗余代码请自行根据需要删减哦
*上图上图
![好看吧](https://img-blog.csdnimg.cn/093a842775a0459e8ff89d8420545af4.png#pic_center)
*![美滋滋](https://img-blog.csdnimg.cn/908368ce459f425796bc653697e211be.png#pic_center)
## 欢迎关注！点赞！！转发哦！！！
首先需要安装vuedraggable依赖包：
npm install vuedraggable --save
因为拖拽组件依赖sortablejs ，如果项目没有安装sortablejs ，可能需要安装一下
npm install sortablejs --save
复制vue html代码到项目：
 <div class=dndList-l
今天，我们将使用Vue.js来实现一个跨表格相互拖拽。在开发这个业务之前呢，也调研了网上很多解决方案，但个人感觉不太符合现在做的这个需求。所以，压根就自己再开发一套，方便以后维护。
什么需求呢？就是多个表格之间可以实现相互拖拽，即A表格中的表格项可以拖拽到B表格，B表格的表格项可以拖拽到C表格，并且它们之间可以单选、多选表格项相互拖拽。然后，D表格加以限制，每次只能够拖入一项，需输入密码，密码正确后，被拖入的一项替换D表格中的表格项，被替换的D表格项放入A表格，只能被替换，不能被删除。
文字太枯燥，我
<template>
  <div class="resize-container" @mousedown="startResize">
    <div ref="box" class="resize-box"></div>
    <div class="resize-handler"></div>
</template>
<script>
export default {
  data() {
    return {
      isResizing: false,
      startX: null,
      startWidth: null
  methods: {
    startResize(e) {
      this.isResizing = true;
      this.startX = e.clientX;
      this.startWidth = this.$refs.box.offsetWidth;
      document.addEventListener("mousemove", this.resize);
      document.addEventListener("mouseup", this.stopResize);
    resize(e) {
      if (!this.isResizing) return;
      const width = this.startWidth + (e.clientX - this.startX);
      this.$refs.box.style.width = `${width}px`;
    stopResize() {
      this.isResizing = false;
      document.removeEventListener("mousemove", this.resize);
      document.removeEventListener("mouseup", this.stopResize);
</script>
<style>
.resize-container {
  position: relative;
  width: 500px;
  height: 300px;
  border: 1px solid #ccc;
.resize-box {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #f8f8f8;
.resize-handler {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 20px;
  height: 20px;
  background-color: #ccc;
  cursor: se-resize;
</style>
您可以将以上代码复制到您的vue组件中，并根据需要进行修改。希望能帮助到您！