vue实现table拖拽到tree生成数据，树增删编辑数据

最新推荐文章于 2024-05-16 10:28:45 发布
最新推荐文章于 2024-05-16 10:28:45 发布
阅读量909 收藏 1
点赞数
分类专栏： # javascript # vue项目 文章标签： css html5 javascript jquery
原文链接：https://blog.csdn.net/If_CannewBoyFriend/article/details/108072059
版权

转自：https://blog.csdn.net/If_CannewBoyFriend/article/details/108072059

拖拽树主要是绑定 mousedown mouseup 事件 主要参考ztree官网 http://www.treejs.cn/v3/main.php#_zTreeInfo

树结构样式参考 https://github.com/tower1229/Vue-Giant-Tree

下载地址 https://download.csdn.net/download/If_CannewBoyFriend/12720563

存在问题：拖拽时候显示的信息不随鼠标移动，一直在页面底部，
解决方案：在bindMouseDown 方法中显示的信息添加绝对定位，父级相对定位

<span class='dom_tmp' style='position:absolute'>" +
            this.targetNode.name +
 </span>

table拖拽

bindDom () {
  this.$nextTick(() => {
    $('.dragBox').bind('mousedown', this.bindMouseDown)
  })
},
bindMouseDown (e) {
  const target = e.target
  const id = $(target).parent('.dragbody').attr('dataID')
  console.log(id)
  if (target != null && id) {
    const doc = $(document); const target = $(target)
    const docScrollTop = doc.scrollTop()
    const docScrollLeft = doc.scrollLeft()
    const obj = this.tableData.filter(item => item.id === id)
    if (obj && obj.length > 0) {
      this.targetNode = obj[0]
    }
    console.log(this.targetNode)
    const curDom = $("<span class='dom_tmp'>" + this.targetNode.name + '</span>')
    if (this.curTmpTarget) this.curTmpTarget.remove()
    curDom.appendTo('body')
    curDom.css({
      'top': (e.clientY + docScrollTop + 3) + 'px',
      'left': (e.clientX + docScrollLeft + 3) + 'px'
    })
    this.curTarget = target
    this.curTmpTarget = curDom
    doc.bind('mousemove', this.bindMouseMove)
    doc.bind('mouseup', this.bindMouseUp)
  }
  if (e.preventDefault) {
    e.preventDefault()
  }
},
bindMouseMove (e) {
  this.noSel()
  const doc = $(document)
  const docScrollTop = doc.scrollTop()
  const docScrollLeft = doc.scrollLeft()
  const tmpTarget = this.curTmpTarget
  if (tmpTarget) {
    tmpTarget.css({
      'top': (e.clientY + docScrollTop + 3) + 'px',
      'left': (e.clientX + docScrollLeft + 3) + 'px'
    })
  }
  return false
},
bindMouseUp (e) {
  const doc = $(document)
  doc.unbind('mousemove', this.bindMouseMove)
  doc.unbind('mouseup', this.bindMouseUp)
  // const target = this.curTarget
  const tmpTarget = this.curTmpTarget
  if (tmpTarget) tmpTarget.remove()
  /* if ($(e.target).parents('#treeDemo').length === 0) {
    console.log(target)
  } */
},
noSel () {
  /* try {
      window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
  } catch(e){} */
},
// 拖动添加数据 用于捕获 zTree 上鼠标按键松开后的事件回调函数
onMouseUpFun (e, treeId, treeNode) {
  try {
    const target = this.curTarget
    const tmpTarget = this.curTmpTarget
    if (!target) return
    const parentNode = treeNode
    if (tmpTarget) tmpTarget.remove()
    this.curTarget = null
    this.curTmpTarget = null
    if (parentNode) {
      return new Promise((resolve, reject) => {
        addMediaTree(this.targetNode).then(response => {
          if (response && response.errorMsg === '成功') {
            this.$message({
              message: '添加成功！',
              type: 'success'
            })
            // 添加成功之后 更新树
            const dadd = response.data
            // 树展示的属性用的name 我的接口返回的是title  处理数据
            dadd['name'] = dadd.title
            var nodes = this.ztreeObj.addNodes(parentNode, dadd, true)
            console.log(nodes)
          } else {
            this.$message({
              message: '添加失败！',
              type: 'error'
            })
          }
          resolve(response)
        }).catch(error => {
          reject(error)
        })
      })
    } else {
      console.log('数据错误')
    }
  } catch (e) {
    console.log(e)
  }
},

右键方法::


// 右键显示栏目 event, treeId, treeNode
openMenu (e, treeId, object) {
  /* let hasAuthB = false
  if (this.HasAuth('/assettree/add') || this.HasAuth('/assettree/edit') ||
    this.HasAuth('/assettree/delete') || this.HasAuth('/assettree/poster')) {
    hasAuthB = true
  }
  console.log(object.isAuthorized, hasAuthB)
  if (!object.isAuthorized || !hasAuthB) {
    this.$message({
      message: '您暂无权限操作',
      type: 'info'
    })
    return
  } */
  /* if (object.children && object.children.length > 0) {
    this.isHasChildren = true
  } else {
    this.isHasChildren = false
  } */
  this.treeData = object
  const menuMinWidth = 105
  const offsetLeft = this.$el.getBoundingClientRect().left // container margin left
  const offsetWidth = this.$el.offsetWidth // container width
  const maxLeft = offsetWidth - menuMinWidth // left boundary
  const left = e.clientX - offsetLeft + 20// 15: margin right
 
  document.addEventListener('click', (e) => {
    this.visible = false
  })
 
  if (left > maxLeft) {
    this.left = maxLeft
  } else {
    this.left = left
  }
  this.top = e.clientY - 80
 
  this.visible = true
},

实现



<template>
  <div id="app">
    <!--<img src="./assets/logo.png">-->
    <!--<HelloWorld/>-->
    <el-row style="margin-top: 20px;">
      <el-col :span="6" :offset="6">
        <el-row>
          <tree
            :setting="setting"
            :nodes="setTree"
            @onCreated="handleCreated"
          />
        </el-row>
        <ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
          <li  @click="NodeAdd()">添加下级栏目</li>
          <li  @click="NodeEdit">编辑栏目</li>
          <li  @click="NodeDel">移除该栏目</li>
        </ul>
      </el-col>
      <el-col :span="12">
        <table class="el-table table table-striped">
          <thead class="thead-dark">
          <tr>
            <th><div class="cell">ID</div></th>
            <th><div class="cell">名称</div></th>
            <th><div class="cell">描述</div></th>
          </tr>
          </thead>
          <tbody class="dragBox">
          <tr v-for="(item,index) in tableData" :key="index" class="dragbody" :dataID="item.id">
            <td class="dragtr" style="text-align: center">{{ item.id }}</td>
            <td style="text-align: center">{{ item.name }}</td>
            <td style="text-align: center">{{ item.desc }}</td>
          </tr>
          </tbody>
        </table>
      </el-col>
    </el-row>
    <div style="margin-top: 100px;">实现功能拖拽右侧表格到左侧树，自动生成数据</div>
    <!--左边节点的增删改查修改 -->
    <el-dialog
      :title="dialog.title"
      :visible.sync="dialog.show"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :modal-append-to-body="false"
      :before-close="handleClose"
      custom-class="centerDialog"
    >
      <el-form
        ref="menuData"
        :model="menuData"
        :rules="form_rules"
        label-width="120px"
        style="margin:10px;width:auto;"
      >
        <el-form-item prop="name" label="节点名称">
          <el-input v-model="menuData.name" type="name" placeholder="请输入媒资树节点名称" />
        </el-form-item>
        <el-form-item prop="description" label="节点描述">
          <el-input v-model="menuData.desc" type="textarea" placeholder="请输入节点描述" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleClose()">取 消</el-button>
        <el-button type="primary" @click="onSubmitMenu('menuData')">提 交</el-button>
      </div>
    </el-dialog>
  </div>
</template>
 
<script>
import * as $ from 'jquery'
import tree from '@/components/ztree'
import {addMediaTree, delMediaTree, editMediaTree} from '@/api/index'
if (!window.jQuery) {
  window.jQuery = $
}
export default {
  name: 'App',
  components: {
    tree
  },
  data () {
    return {
      setting: {
        edit: {
          enable: true,
          showRemoveBtn: false,
          showRenameBtn: false,
          drag: {
            prev: true,
            next: true,
            inner: true
          }
        },
        check: {
          enable: false
        },
        data: {
          simpleData: {// 设置数据键值
            enable: true,
            idKey: 'treeID',
            pIdKey: 'parentTreeID'
          }
        },
        view: {
          showIcon: false,
          addDiyDom: this.addDiyDom // 自定义图标
        },
        callback: {
          onMouseUp: this.onMouseUpFun,
          onRightClick: this.openMenu
        }
      },
      setTree: [
        {treeID: '1', name: '少儿剧场', processStatusID: 'input'},
        {treeID: '2', name: '经典怀旧', processStatusID: 'rejected'},
        {treeID: '3', name: '少儿舞蹈', parentTreeID: '1', processStatusID: 'issued'},
        {treeID: '4', name: '川剧', parentTreeID: '2', processStatusID: 'checked'},
        {treeID: '5', name: '韩流剧场', processStatusID: 'input'}
      ],
      ztreeObj: null,
      iconName: {
        'input': 'iconluru inputIcon',
        'rejected': 'iconshibai rejectedIcon',
        'issued': 'icontongguo issuedIcon',
        'checked': 'iconyishen checkedIcon'
      },
      tableData: [
        {id: '11', name: '少儿英语', desc: '少儿英语'},
        {id: '22', name: '周星驰特辑', desc: '周星驰特辑'},
        {id: '33', name: '邪恶之花', desc: '悬疑韩剧'},
        {id: '44', name: '非遗扎染', desc: '非遗扎染'}
      ],
      targetNode: null,
      treeData: {},
      curTmpTarget: null,
      curTarget: null,
      visible: false,
      left: 0,
      top: 0,
      dialog: {
        show: false,
        option: '',
        title: ''
      },
      menuData: {},
      // 自定义验证
      form_rules: {}
    }
  },
  methods: {
    // 自定义图标 使用icon font
    addDiyDom (treeId, treeNode) {
      const aObj = $('#' + treeNode.tId + '_a')
      const className = this.iconName[treeNode.processStatusID]
      const editStr = '<i class="iconfont ' + className + '" ></i>'
      aObj.after(editStr)
    },
    // 拖动添加数据
    onMouseUpFun (e, treeId, treeNode) {
      try {
        const target = this.curTarget
        const tmpTarget = this.curTmpTarget
        if (!target) return
        const parentNode = treeNode
        if (tmpTarget) tmpTarget.remove()
        this.curTarget = null
        this.curTmpTarget = null
        if (parentNode) {
          return new Promise((resolve, reject) => {
            addMediaTree(this.targetNode).then(response => {
              if (response && response.errorMsg === '成功') {
                this.$message({
                  message: '添加成功！',
                  type: 'success'
                })
                // 添加成功之后 更新树
                const dadd = response.data
                // 树展示的属性用的name 我的接口返回的是title  处理数据
                dadd['name'] = dadd.title
                var nodes = this.ztreeObj.addNodes(parentNode, dadd, true)
                console.log(nodes)
              } else {
                this.$message({
                  message: '添加失败！',
                  type: 'error'
                })
              }
              resolve(response)
            }).catch(error => {
              reject(error)
            })
          })
        } else {
          console.log('数据错误')
        }
      } catch (e) {
        console.log(e)
      }
    },
    handleCreated: function (ztreeObj) {
      this.ztreeObj = ztreeObj
      ztreeObj.expandNode(ztreeObj.getNodes()[0], true)
 
      //
      this.bindDom()
    },
    bindDom () {
      this.$nextTick(() => {
        $('.dragBox').bind('mousedown', this.bindMouseDown)
      })
    },
    bindMouseDown (e) {
      const target = e.target
      const id = $(target).parent('.dragbody').attr('dataID')
      console.log(id)
      if (target != null && id) {
        const doc = $(document); const target = $(target)
        const docScrollTop = doc.scrollTop()
        const docScrollLeft = doc.scrollLeft()
        const obj = this.tableData.filter(item => item.id === id)
        if (obj && obj.length > 0) {
          this.targetNode = obj[0]
        }
        console.log(this.targetNode)
        const curDom = $("<span class='dom_tmp'>" + this.targetNode.name + '</span>')
        if (this.curTmpTarget) this.curTmpTarget.remove()
        curDom.appendTo('body')
        curDom.css({
          'top': (e.clientY + docScrollTop + 3) + 'px',
          'left': (e.clientX + docScrollLeft + 3) + 'px'
        })
        this.curTarget = target
        this.curTmpTarget = curDom
        doc.bind('mousemove', this.bindMouseMove)
        doc.bind('mouseup', this.bindMouseUp)
      }
      if (e.preventDefault) {
        e.preventDefault()
      }
    },
    bindMouseMove (e) {
      this.noSel()
      const doc = $(document)
      const docScrollTop = doc.scrollTop()
      const docScrollLeft = doc.scrollLeft()
      const tmpTarget = this.curTmpTarget
      if (tmpTarget) {
        tmpTarget.css({
          'top': (e.clientY + docScrollTop + 3) + 'px',
          'left': (e.clientX + docScrollLeft + 3) + 'px'
        })
      }
      return false
    },
    bindMouseUp (e) {
      const doc = $(document)
      doc.unbind('mousemove', this.bindMouseMove)
      doc.unbind('mouseup', this.bindMouseUp)
      // const target = this.curTarget
      const tmpTarget = this.curTmpTarget
      if (tmpTarget) tmpTarget.remove()
      /* if ($(e.target).parents('#treeDemo').length === 0) {
        console.log(target)
      } */
    },
    noSel () {
      /* try {
          window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
      } catch(e){} */
    },
    // 右键显示栏目 event, treeId, treeNode
    openMenu (e, treeId, object) {
      /* let hasAuthB = false
      if (this.HasAuth('/assettree/add') || this.HasAuth('/assettree/edit') ||
        this.HasAuth('/assettree/delete') || this.HasAuth('/assettree/poster')) {
        hasAuthB = true
      }
      console.log(object.isAuthorized, hasAuthB)
      if (!object.isAuthorized || !hasAuthB) {
        this.$message({
          message: '您暂无权限操作',
          type: 'info'
        })
        return
      } */
      /* if (object.children && object.children.length > 0) {
        this.isHasChildren = true
      } else {
        this.isHasChildren = false
      } */
      this.treeData = object
      const menuMinWidth = 105
      const offsetLeft = this.$el.getBoundingClientRect().left // container margin left
      const offsetWidth = this.$el.offsetWidth // container width
      const maxLeft = offsetWidth - menuMinWidth // left boundary
      const left = e.clientX - offsetLeft + 20// 15: margin right
 
      document.addEventListener('click', (e) => {
        this.visible = false
      })
 
      if (left > maxLeft) {
        this.left = maxLeft
      } else {
        this.left = left
      }
      this.top = e.clientY - 80
 
      this.visible = true
    },
    handleClose () {
      // 关闭弹窗 清除之定义验证提示消息
      this.dialog.show = false
      this.$refs['menuData'].clearValidate()
    },
    // 删除节点
    NodeDel () {
      if (this.treeData.children && this.treeData.children.length !== 0) {
        this.$message.error('此节点有子级，不可删除！')
        return false
      } else {
        // 新增节点可直接删除，已存在的节点要二次确认
        // 删除操作
        const DelFun = () => {
          return new Promise((resolve, reject) => {
            delMediaTree(this.treeData.treeID).then(response => {
              if (response && response.errorMsg === '成功') {
                this.$message({
                  type: 'success',
                  message: '删除成功'
                })
                // 更新树
                this.ztreeObj.removeNode(this.treeData)
                resolve()
              } else {
                this.$message({
                  type: 'error',
                  message: '删除失败!'
                })
                resolve()
              }
            }).catch(error => {
              reject(error)
            })
          })
        }
        // 二次确认
        const ConfirmFun = () => {
          this.$confirm('是否删除此节点？', '提示', {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
            center: true
          }).then(() => {
            DelFun()
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '取消删除!'
            })
          })
        }
        ConfirmFun()
      }
    },
    // 添加节点
    NodeAdd () { // 新增节点,
      this.dialog.show = true
      this.dialog.title = '添加节点信息'
      this.dialog.option = 'add'
      this.dialog.isTop = false
      this.menuData = {
        treeID: 0
      }
    },
    // 编辑节点
    NodeEdit () { // 编辑节点
      this.dialog.show = true
      this.dialog.option = 'edit'
      this.menuData = Object.assign({}, this.treeData)
      this.dialog.title = '编辑该节点信息'
    },
    // 保存节点修改
    onSubmitMenu (form) {
      this.$refs[form].validate(valid => {
        if (valid) {
          // 此时this.menuData 保留了树结构的字段 直接提交后端报错 所以处理数据
          const subData = {
            title: this.menuData.name,
            treeID: this.menuData.treeID,
            parentTreeID: this.menuData.parentTreeID
          }
          if (this.dialog.option === 'edit') {
            return new Promise((resolve, reject) => {
              editMediaTree(subData).then(response => {
                if (response && response.errorMsg === '成功') {
                  this.dialog.show = false
                  this.$message({
                    message: '编辑成功！',
                    type: 'success'
                  })
                  /**
                   * this.ztreeObj.updateNode(this.menuData)
                   * updateNode 更新树只能更新某些特定字段 具体参考 ztree 官网
                   */
                  // 删除
                  this.ztreeObj.removeNode(this.menuData)
                  // 找到父节点
                  const filterData = (node) => {
                    return node.treeID === this.menuData.parentTreeID
                  }
                  const pid = this.ztreeObj.getNodesByFilter(filterData, true)
                  // 添加
                  var nodes = this.ztreeObj.addNodes(pid, this.menuData, true)
                  console.log(nodes)
                  resolve()
                } else {
                  this.$message({
                    message: '编辑失败！',
                    type: 'error'
                  })
                  resolve(response)
                }
              }).catch(error => {
                reject(error)
              })
            })
          } else {
            return new Promise((resolve, reject) => {
              addMediaTree(subData).then(response => {
                this.dialog.show = false
                if (response && response.errorMsg === '成功') {
                  this.$message({
                    message: '添加成功！',
                    type: 'success'
                  })
                  let parentNode = null
                  const addData = response.data
                  // 处理属性不一致
                  addData.name = addData.title
                  if (addData.parentTreeID) {
                    parentNode = this.treeData
                  }
                  var nodes = this.ztreeObj.addNodes(parentNode, addData, true)
                  console.log(nodes)
                } else {
                  this.$message({
                    message: '添加失败！',
                    type: 'error'
                  })
                }
                resolve(response)
              }).catch(error => {
                this.dialog.show = false
                reject(error)
              })
            })
          }
        }
      })
    }
  }
}
</script>
 
<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.inputIcon{
  color: #409eff;
  font-size: 14px;
  margin-left: 5px;
}
.rejectedIcon{
  color: #f56c6c;
  font-size: 17px;
  margin-left: 5px;
}
.issuedIcon{
  color: #67c23a;
  font-size: 17px;
  margin-left: 5px;
}
.checkedIcon{ color: #e6a23c;font-size: 17px;margin-left: 5px;}
 
.el-table th{
  white-space: nowrap;
  overflow: hidden;
  user-select: none;
  background-color: #fff;
}
th {
  padding: 12px 0;
  min-width: 0;
  box-sizing: border-box;
  text-overflow: ellipsis;
  vertical-align: middle;
  position: relative;
  text-align: left;
}
.el-table .cell {
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  word-break: break-all;
  line-height: 23px;
  padding-left: 10px;
  padding-right: 10px;
  text-align: center;
}
.span-ellipsis {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: block;
}
  .dragbody{
    cursor: pointer;
  }
.dom_tmp{
  position: absolute;
  font-size: 16px;
  color: #606266;
}
.contextmenu {
  margin: 0;
  background: #fff;
  z-index: 100;
  position: absolute;
  list-style-type: none;
  padding: 5px 0;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 400;
  color: #333;
  text-align: center;
  box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
 
}
 
.contextmenu li {
  margin: 0;
  padding: 7px 16px;
  cursor: pointer;
}
 
.contextmenu li:hover {
  background: #eee;
}
</style>
二进制女猿
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue jsx 封装Table 表格+Tree 树形控件
老司机的后备箱
09-29 1533
通过表格展示树的层级，可通过对树的勾选对每一个界面的dom元素进行控制，控制程度可精确到组件/标签整理了一套《前端大厂面试宝典》，包含了HTML、CSS、JavaScript、HTTP、TCP协议、浏览器、VUE、React、数据结构和算法，一共201道面试题，并对每个问题作出了回答和解析。有需要的小伙伴，可以点击文末卡片领取这份文档，无偿分享部分文档展示：文章篇幅有限，后面的内容就不一一展示了有需要的小伙伴，可以点下方卡片免费领取。
vue2 使用vue-org-tree 组件完整示例Demo vue2-org-tree
热门推荐
LlanyW的专栏
11-02 1万+
安装完成后，vue2项目根目录下package.json自动更新以上 2个包信息。安装vue2-org-tree, 然后再安装样式 less-loade。
VUE tree树双击选中(显示层级结构) 及 vuedraggable插件拖拽功能的实现_el-tree树节点双击
最新发布
2401_84413092的博客
05-16 348
onMove(e) { //拖拽事件 https://blog.csdn.net/Kiruthika/article/details/123903706 可查看相关配置。//单次点击次数超过2次不作处理,直接返回,也可以拓展成多击事件。HTTP1.1 如何解决 HTTP 的队头阻塞问题？对于定长和不定长的数据，HTTP 是怎么传输的？label: “二级 3-2”}]}],HTTP 中如何处理表单数据的提交？如何理解 HTTP 缓存及缓存代理？HTTP 如何处理大文件的传输？HTTP 报文结构是怎样的？
前端框架 （一）zTree 从数据库中动态加载树形菜单
weixin_34252686的博客
05-13 921
这几天做动态菜单用到了这个插件，目前用的很广泛的一个开源框架，最新发布的QUI框架就是用这个插件开发的菜单部分，因此还是很值得深入研究和学习，通过使用感觉功能很丰富，好多函数不用自己开发和编写，官网上有很详尽的API可以参考，用着算顺手但学习使用的过程中也遇到了一些困难，听过反复测试和查资料都理解了，但也在思考一个问题，怎么样才能使得最快的时间从接触一个新东西到灵活掌握的程...
史上最全，在vue中使用zTree实现树型结构
qq_39285178的博客
06-24 8728
最近做了蛮多需求都是在vue里面去操作dom，着实让人头大 需求如下：要求树形结构按照设计稿样式（ztree原本的样式ui接受不了） 鼠标浮动上去的时候，有功能按钮出现，浮在功能按钮上面，出现对应的功能提示 支持树形结构搜索，搜索后高亮显示，并出现默认选中样式 树结构很长，支持滚动（会有一个问题，浮动的功能提示信息受overflow的影响，那么第一行的提示信息会被覆盖） 好了，看下做好的效果图...
树型结构拖拽
晨曦的博客
08-31 1370
开发功能时恰好需要一个既可以从列表里拖拽到树,又可以树托到列表的功能,后来发现我的需求和我开发的不太一样,因为是二次开发再增加开发不太好搞,所以暂时不要了,但功能开发的还完备. 我这里是使用VueDragTreeOrg插件二次开发 要求: //main.js文件增加 //使用插件 "vuedraggable": "^2.16.0", npm insatll 安装 或yarn 安装 还有什么 stuly等什么报错 是因为版本不对 参考: "stylus": "^0.54.8", "sty..
基于Vue实现可以拖拽的树形表格实例详解
10-17
因业务需求，需要一个树形表格，并且支持拖拽排序，任意未知插入，github搜了下，真不到合适的，大部分树形表格都没有拖拽功能，所以决定自己实现一个。这里分享一下实现过程,需要的朋友可以参考下
vue-drag-tree:基于Vue的拖拽组织树
05-27
vue-drag-tree-org内容列表安装# use npmnpm install vue-drag-tree-org# use yarnyarn add vue-drag-tree-org使用# useimport VueDragTreeOrg from 'vue-drag-tree-org'Vue.use(VueDragTreeOrg)# or usecomponents:...
基于Vue实现可以拖拽的树形表格
08-10
在Vue.js框架中实现一个可拖拽的树形表格是一项技术挑战，涉及到组件设计、事件处理、数据管理和DOM操作等多个方面。Vue.js以其简洁的API和强大的响应式系统深受开发者喜爱，而添加拖拽功能则需要用到HTML5的Drag ...
vue-tree-list:tree树形结构的Vue组件
05-02
支持添加treenode / leafnode，编辑节点名称并拖动。 安装 安装插件，然后您就可以全局使用该组件了。 import Vue from 'vue' import VueTreeList from 'vue-tree-list' Vue . use ( VueTreeList ) 或者只是像...
022：vue中tree结构数据变成扁平化table结构数据的示例
大剑师兰特的GIS世界
07-04 955
vue在使用element UI tree的时候，有的时候是要做逆向处理的，即将树形结构的数据转化为table结构的数据，即扁平化的json数据。 如何处理呢？
treetable 数据表格拖拽的jquery插件
05-15
数据表格拖拽的jquery数据表格插件
vue项目 使用SortableJs拖拽树形排序，树形添加、删除、编辑
qq_30682951的博客
03-31 1814
使用sortable.js拖拽树形结构数据，树形数据可以编辑、删除、添加
vue实现tree-table
u012682013的博客
05-31 6980
elment有实现好的tree-table组件可以用,但是自己想自己写写看,写的有点挫,但是功能都实现了,特此记录下,如有不对的地方,欢迎指正. 效果图如下: 可以无限级展开 思路:将后端的数据处理生成树形结构,再通过深度优先算法,生成categoryList;这样就可以用table,直接v-for显示所有的类别,且对每个分类进行操作就会很方便,就跟table没有什么区别. 实现代码: ...
Vue实现拖拽绑定功能
creatlh的博客
03-15 390
防止mouseDown事件被子元素引用可以利用css pointer-events: none（禁用点击穿透）;防止父级事件向下传递。因为是简单的两个列表项的绑定，对拖拽性能要求不高。
Vue el-table tree-props selection(表格+展开行/多级+多选)
qq_20805455的博客
02-22 3728
Vue el-table tree-props selection(表格+展开行/多级+多选)
vue实现树状结构+拖拽
m0_57057282的博客
09-08 1956
然后树组件和树组件对应的拖拽都完成了，该进行拖拽区域的设置了。我这里用到了pubsub.js，相关内容小伙伴可以自行百度。我直接推一手链接，直接用他的最终源码就可以。用到了事件总线总归是有些麻烦的。1.首先说树状结构的实现。menudata结构如下。然后，我这里有一些改动。就这样吧，拍拍手，下播。
Vue + Element 表格拖拽排序、树形表格拖拽排序
前端打工人的博客
08-05 2678
今天给大家分享一下表格（列表）及树形表格拖拽排序，树形表格排序的教程不多，可能还会有问题，我在这里详细给大家讲解一下，如果你有这样的需求或觉得有用，请给个关注或收藏一下吧，方便后期查看使用......
关于d3.js绘制的树中g元素的拖动的功能实现
春夏秋冬bin的博客
03-08 3861
本人在做项目的时候，遇到了需要将d3.js绘制出来的树进行拖动的问题。1.先贴创建该树的源码//该树的结构 var treeData = [ { name: "原问题", description: "", _prototype: "_question", children: [] } ]; // ************** Generate the tr...
利用vue框架实现对后端数据的增删查改
06-07
要使用Vue框架来实现对后端数据的增删查改，需要遵循以下步骤： 1. 首先，需要创建Vue实例并将其挂载到HTML页面上。可以使用CDN引入Vue或通过npm安装Vue。 2. 在Vue实例中，需要定义一个data属性来保存后端返回的数据，例如使用axios库从后端获取数据并将其保存在data属性中。 3. 在HTML页面中，可以使用Vue指令（v-for、v-bind、v-model等）将data属性中的数据绑定到页面上。例如使用v-for指令遍历数据并将其显示在表格中。 4. 当用户想要添加新数据时，可以通过Vue事件监听器（@click、@submit等）来响应用户的操作，例如通过点击“添加”按钮触发一个事件，在事件处理函数中使用axios向后端发送请求并将新数据添加到data属性中。 5. 当用户想要修改或删除数据时，可以通过双向数据绑定和Vue事件监听器来实现。例如使用v-model指令将表格中的数据绑定到Vue实例中的一个属性上，当用户修改数据时，数据会自动更新到Vue实例中。而当用户点击“删除”按钮时，可以通过axios向后端发送请求并将数据从data属性中删除。 6. 最后，需要注意在与后端交互时要遵循RESTful API规范，例如使用GET请求获取数据、使用POST请求添加数据、使用PUT请求修改数据、使用DELETE请求删除数据。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值