vue的table组件

eternalshallow 发布于2019-08-23 11:26 / 2485人阅读

一个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)

服务器托管云服务器 vue组件 vue组件开发 vue父子组件通讯 vue轮播组件

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

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

vue的生命周期解析并通过表单理解MVVM（不仅理论，图文并茂）

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

silvertheo 2019-08-22 14:56 评论0 收藏0
从源码看Element UI Table组件实现思路

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

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

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

supernavy 2019-08-26 10:48 评论0 收藏0
【Vue项目总结】基于饿了么组件封装

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

YPHP 2019-08-23 18:23 评论0 收藏0