npm:drag-table-plugin

README

drag-table-plugin

一个适用于vue表格的横向拖拽插件

开发背景：现实需求中越来越多的表格内容充斥着有限的适口，这时表格的列过宽就会生成滚动条，想查看完整的表格就要横向拖拽滚动条，但如果表格内容过长则需要用户将表格滚到底部才能拖拽滚动条，非常不方便，所以这时可能需要一个可以直接用鼠标横向拖拽表格(容器)的插件。

Features

将支持纵向的拖拽实现全方位的滚动
针对更多的UI组件库做快捷指令！
兼容大部分现代浏览器

Install drag-table-plugin

npm install drag-table-plugin --save

import dragTable from 'drag-table-plugin'
Vue.use(dragTable)

Usage

<template>
    <Table v-drag="dragEl" >
    </Table>
</template>
<script>
    export default {
        data () {
            return {
                dragEl: {
                container: '',
                    childBody: ''
                }
            }
        }
    }
</script>

Mode

Quick instructions: 现支持两个组件库的快捷指令

element-ui
view-design

exp:

<el-table 
  v-drag
...
>
  ...
</el-table>

当表格为element或iview的表格时v-drag后面不需要填写表达式

通用配置: v-drag接受一个表达式，该表达式类型为对象，对象内必须有一个container属性和一个childBody属性

属性名称	说明	备注
container	视口容器dom，当此dom宽度小于包裹的内容宽度时产生滚动条，可通过ref获取	必须属性
childBody	内容dom，可通过ref获取	必须属性

注意: container和childBody为挂载期结束后的dom，而不是vnode，建议通过ref的$el获取到

Usage no npm install needed!