vue的table組件

一個vue-table的組件

說明：

1.基於element-ui開發的vue表格組件。

功能:

1.支持樹形數據的展現

2.行拖拽排序

3.單元格拖拽排序

github

使用方法：

1.下載npm包:

你的VUE項目的根目錄底下運行：

npm install ele-table

2.引入本npm包並註冊爲vue的組件：

例如：在須要使用的vue頁面中：

<template>
        
        <!-- 裏面寫ele-table組件-->
        <ele-table :data="tableData" treetable style="width: 100%">
          <ele-table-column prop="id" label="姓名">
            <template slot-scope="scope">
              <div :style="`padding-left:${20*(scope.row._indent-1)}px`">
                <span  v-if="scope.row.children">
                  <i v-if="scope.row._expand" >-</i><i v-else>+</i>
                </span>
                <span>{{scope.row.id}}</span>
              </div>
            </template>
          </ele-table-column>
          <ele-table-column prop="id" label="年齡" width="180">
          </ele-table-column>
          <ele-table-column
            prop="label"
            label="地址">
          </ele-table-column>
        </ele-table>
        <ele-table
          draggablerow //可否行拖拽
          :allow-drag="allowdrag" //可否被拖拽
          :allow-drop="allowDrop" //可否被放置
          :data="tableData"
          @node-drag-start="handleDragStart"
          @node-drag-enter="handleDragEnter"
          @node-drag-leave="handleDragLeave"
          @node-drag-over="handleDragOver"
          @node-drag-end="handleDragEnd"
          style="width: 100%">
          <ele-table-column prop="id" label="姓名"   width="180">
          </ele-table-column>
          <ele-table-column
            prop="id"
            label="年齡"
            width="180">
          </ele-table-column>
          <ele-table-column
            prop="label"
            label="地址">
          </ele-table-column>
        </ele-table>
    </template>
    
    <script>
    import { eleTable, eleTableColumn } from "ele-table";
    import 'ele-table/dist/ele-table.css'; 
    //項目引入element-ui 不須要引入樣式,但須要class類指定拖拽樣式
    //<style>
        //.el-table--dropNode{
         // background-color: #409eff !important;
        //}
       // .el-tree__drop-indicator {
       //     position: absolute;
        //    left: 0;
        //    right: 0;
        //    height: 2px !important;
        //    background-color: #409eff;
        //    z-index: 10000;
        //} 
    //</style>
    export default {
        data(){
            return{
                tableData: [{
                  id: 1,
                  label: '一級 1',
                  _expand:true,   //設置默認展開節點
                  children: [{
                    id: 4,
                    label: '二級 1-1',
                    _expand:true,
                    children: [{
                      id: 9,
                      label: '三級 1-1-1'
                    }, {
                      id: 10,
                      label: '三級 1-1-2'
                    }]
                 }]
               }, {
                 id: 2,
                 label: '一級 2',
                 children: [{
                    id: 5,
                    label: '二級 2-1'
                 }, {
                    id: 6,
                    label: '二級 2-2'
                 }]
               }]
            }
        },
        components: {
            eleTable,
            eleTableColumn 
        },
        methods: {
            handleDragEnd(row, column, cell, event) {
              let data = this.tableData[row.draggingcolumn];
              if (cell == "after") {
                this.tableData.splice(column.dropcolumn + 1, 0, data);
                if (row.draggingcolumn > column.dropcolumn) {
                  this.tableData.splice(row.draggingcolumn + 1, 1);
                } else {
                  this.tableData.splice(row.draggingcolumn, 1);
                }
              }
              if (cell == "before") {
                this.tableData.splice(column.dropcolumn, 0, data);
                if (row.draggingcolumn > column.dropcolumn) {
                  this.tableData.splice(row.draggingcolumn + 1, 1);
                } else {
                  this.tableData.splice(row.draggingcolumn, 1);
                }
              }
              if (cell == "inner") {
                this.$set(
                  this.tableData,
                  row.draggingcolumn,
                  this.tableData[column.dropcolumn]
                );
                this.$set(this.tableData, column.dropcolumn, data);
              }
            },
        },
       }
    }
    </script>

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)