vue-table-dragging

install

1. npm 安装
  npm install vue-table-dragging
2. yarn 安装
  yarn add vue-table-dragging

说明

基于 vue-draggable-resizable 开发

数据

  let tableData = {
    tableId: 1, // 标识
    w: 200, // 表格外部边框的宽度 表格的列数 * 每列宽度
    h: 60, // 表格外部边框的高度 th的height + td的height
    x: 0, // 初始left值
    y: 0, // 初始top值
    data: [ // 表格每列数据
      {
        label: { // 表头 th
          name: '姓名', // th内容
          w: 100, // 初始宽度
          h: 30, // 初始高度
          x: 0, // 初始left 当前列之前所有列宽之和
          y: 0 // 初始top 
        },
        value: { // td
          name: 'name', // td内容
          w: 100, // 初始宽度
          h: 30, // 初始高度
          x: 0, // 当前列之前所有列宽之和
          y: 30 // value的y = label 的 h
        }
      },
      {
        label: {
          name: '年龄',
          w: 100,
          h: 30,
          x: 100,
          y: 0
        },
        value: {
          name: 'age',
          w: 100,
          h: 30,
          x: 100,
          y: 30
        }
      }
    ]
  }

使用

main.js

import vueTableDragging from 'vue-table-dragging'
Vue.use(vueTableDragging)

index.vue

  <div style="position: relative; width: 595px; height: 842px">
    <vue-table-dragging
      :w="tableData.w"
      :h="tableData.h"
      :x="tableData.x"
      :y="tableData.y"
      :table-id="tableData.tableId"
      :table-data="tableData.data"
      @refLineParams="getRefLineParams"
      @insideResizing="getInsideResizing"
      @resizing="getExternalResizing"
      @dragging="getExternalDragging"
    />
    <!-- --------------------辅助线------------------ -->
    <span
      v-for="item in vLine"
      v-show="item.display"
      class="ref-line v-line"
      :style="{ left: item.position, top: item.origin, height: item.lineLength}"
    />
    <span
      v-for="item in hLine"
      v-show="item.display"
      class="ref-line h-line"
      :style="{ top: item.position, left: item.origin, width: item.lineLength}"
    />
    <!-- --------------------辅助线------------------ -->
  </div>

  export default {
    data() {
      return {
        tableData,
        vLine: [],
        hLine: []
      }
    },
    methods: {
      // 表格外部拖动的回调
      getExternalDragging(data) {
      },
      // 表格外部调整大小的回调
      getExternalResizing(data) {
      },
      // 表格内部调整大小的回调
      getInsideResizing(data) {
      },
      // 辅助线回调事件
      getRefLineParams(params) {
        const { vLine, hLine } = params
        this.vLine = vLine
        this.hLine = hLine
      }
    }
  }