资讯专栏INFORMATION COLUMN

vue的table组件

eternalshallow / 2560人阅读

一个vue-table的组件 说明:
1.基于element-ui开发的vue表格组件。


功能:

1.支持树形数据的展示

2.行拖拽排序

3.单元格拖拽排序

github

使用方法:
1.下载npm包:
你的VUE项目的根目录底下运行:
    npm install ele-table
2.引入本npm包并注册为vue的组件:
例如:在需要使用的vue页面中:
    
    
    
Calendar Attributes
参数 说明 类型 可选值 默认值
data 显示的数据 array
treetable 是否树形数据 boolean false
_expand 树形数据默认展开节点(不支持递归关联) boolean false
draggablerow 是否开启行拖拽 boolean false
draggable 是否开启单元格拖拽 boolean false
allow-drag 能否被拖拽 Function(row(行数据), column(行拖拽为index,单元格为所在列), cell(节点), event) 要求返回boolean
allow-drop 能否被放置 Function(row, column, cell, event, type) 要求返回boolean
Calendar Events
事件名 说明 参数
node-drag-start 节点开始拖拽时触发的事件 Function(row(行数据), column(行拖拽为index,单元格为所在列), cell(节点), event)
node-drag-enter 拖拽进入其他节点时触发的事件 Function(row(行数据), column(行拖拽为index,单元格为所在列), cell(节点), event, draggingNode(被拖拽节点)
node-drag-leave 拖拽离开某个节点时触发的事件 Function(row(行数据), column(行拖拽为index,单元格为所在列), cell(节点), event, draggingNode(被拖拽节点)
node-drag-over 在拖拽节点时触发的事件 Function(row(行数据), column(行拖拽为index,单元格为所在列), cell(节点), event, draggingNode(被拖拽节点)
node-drag-end 拖拽结束时触发的事件 Function(dragging(被拖拽节点对象), drop(放置节点对象), dropType(放置位置(before、after、inner)), event)
node-drop 拖拽完成时触发的事件 Function(dragging(被拖拽节点对象), drop(放置节点对象), dropType(放置位置(before、after、inner)), event)

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/96970.html

相关文章

  • vue生命周期解析并通过表单理解MVVM(不仅理论,图文并茂)

    摘要:在前端页面中,把用纯对象表示,负责显示,两者做到了最大限度的分离。的显示与否和的布尔值有关,还是只关注数据的变化。两个组件的布尔值通过两个临近的按钮控制,初始值和的结果都是。组件的声明在组件上,则完全没有进入生命周期。 开始前说一说 吐槽 首先, 文章有谬误的地方, 请评论, 我会进行验证修改。谢谢。 vue真是个好东西,但vue的中文文档还有很大的改进空间,有点大杂烩的意思,对于怎么...

    silvertheo 评论0 收藏0
  • 从源码看Element UI Table组件实现思路

    摘要:接下来来看一下是如何编写一个组件的,在看源码之前,首先还是要对他的组件的大致功能有一个了解,这样我们在看源码的时候才会知道这一段大概实现了什么功能。最后我实现的功能文档以及最终的一个样例 在你实现一个组件过程中,一定要注意一下几点 将代码模块化并且分离。如果你将大量的逻辑或者是代码都放在钩子函数中(比如mounted),那么写出来的组件代码将非常丑陋,这样子写出的代码也往往难以维护。...

    moven_j 评论0 收藏0
  • vue element-ui table组件动态生成表头和数据并修改单元格格式 父子组件通信

    摘要:父组件定义表头和表内容表格数据表头数据引入并注册子组件注册子组件获取表头和表内容数据。 父组件 定义表头和表内容 data(){ return{ // 表格数据 tableColumns: [], // 表头数据 titleData:[], } } 引入并注册子组件 import TableComponents from ../../compon...

    supernavy 评论0 收藏0
  • Vue项目总结】基于饿了么组件封装

    摘要:项目中,组件是项目的基石,每个页面都是组件来组装起来,我司没有自己的组件库,选用的是组件库,在它的基础上再次封装。部分代码三级效果如下总结组件是项目的积木条,公用组件的封装成功与否其实是对项目的开发效率有直接影响。 vue项目中,组件是项目的基石,每个页面都是组件来组装起来,我司没有自己的组件库,选用的是ElementUI组件库,在它的基础上再次封装。 可编辑表格 由于是后台管理项目,...

    YPHP 评论0 收藏0

发表评论

0条评论

eternalshallow

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<