一个vue-table的组件 说明:
1.支持树形数据的展示
2.行拖拽排序
3.单元格拖拽排序
github
使用方法:npm install ele-table
例如:在需要使用的vue页面中:
Calendar Attributes -+ {{scope.row.id}}
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
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 |
事件名 | 说明 | 参数 |
---|---|---|
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真是个好东西,但vue的中文文档还有很大的改进空间,有点大杂烩的意思,对于怎么...
摘要:接下来来看一下是如何编写一个组件的,在看源码之前,首先还是要对他的组件的大致功能有一个了解,这样我们在看源码的时候才会知道这一段大概实现了什么功能。最后我实现的功能文档以及最终的一个样例 在你实现一个组件过程中,一定要注意一下几点 将代码模块化并且分离。如果你将大量的逻辑或者是代码都放在钩子函数中(比如mounted),那么写出来的组件代码将非常丑陋,这样子写出的代码也往往难以维护。...
摘要:父组件定义表头和表内容表格数据表头数据引入并注册子组件注册子组件获取表头和表内容数据。 父组件 定义表头和表内容 data(){ return{ // 表格数据 tableColumns: [], // 表头数据 titleData:[], } } 引入并注册子组件 import TableComponents from ../../compon...
摘要:项目中,组件是项目的基石,每个页面都是组件来组装起来,我司没有自己的组件库,选用的是组件库,在它的基础上再次封装。部分代码三级效果如下总结组件是项目的积木条,公用组件的封装成功与否其实是对项目的开发效率有直接影响。 vue项目中,组件是项目的基石,每个页面都是组件来组装起来,我司没有自己的组件库,选用的是ElementUI组件库,在它的基础上再次封装。 可编辑表格 由于是后台管理项目,...
阅读 1399·2021-09-28 09:44
阅读 2479·2021-09-28 09:36
阅读 1027·2021-09-08 09:35
阅读 1966·2019-08-29 13:50
阅读 790·2019-08-29 13:29
阅读 1104·2019-08-29 13:15
阅读 1705·2019-08-29 13:00
阅读 2954·2019-08-26 16:16