阅读 447

【vue组件发布】el-table-draggable

看名字就知道了,是让element-ui的table可拖拽的容器组件

image.png

项目地址

el-table-draggable

vue-draggable支持element-ui中的el-table

demo请查看

特性

  • 支持几乎所有sortablejs的配置
  • 支持多个表格之间互相拖动
  • 代码提示
  • 针对空行进行了处理,可以直接拖动到空的el-table内,无论你有没有显示空行的提示行,默认高度为60px,可以靠.el-table-draggable__empty-table {min-height: px;}来自定义

目前支持的特性

  • 行拖拽
  • 列拖拽
  • 设置handle
  • 设置group实现分类拖拽
  • ...其他sortable.js的配置
  • input事件,因为change事件和sortable.js的默认事件重复,改为input事件,回调为变化后的行(列)集合

安装

使用npm或者yarn

yarn add el-table-draggable

npm i -S el-table-draggable
复制代码

使用

import ElTableDraggable from 'el-table-draggable'

export default {
    components: {
        ElTableDraggable
    }
}
复制代码

template

<template>
    <el-table-draggable>
        <el-table row-key></el-table>
    </el-table-draggable>
</template>
复制代码

props

tag

包裹的组件,默认为div

column

启用列拖拽(试验性功能)0.6增加

其他

差不多支持所有sortablejs的option

事件

input

内部table的数据有因为拖动造成的顺序,增减时进行通知

0.5增加

回调为当前所有行数据

0.6新增

列模式下,如果有value,返回value,否则返回当前列属性列表(property)

其他

差不多支持所有sortablejs的option里面那些on开头的事件,绑定事件的时候请去掉on 例如onSort => @sort

todo

  • 支持列拖动
  • 支持拖动展开的列的时候ghost显示展开的部分
  • 接入html2canvas 将展开/列部分设定到dataTransfer.setDragImage上实现拖拽优化
文章分类
前端
文章标签