vue的table組件

一個vue-table的組件

說明：

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

功能:

1.支持樹形數據的展示

2.行拖拽排序

3.單元格拖拽排序

github

使用方法：

1.下載npm包:

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

    npm install ele-table
```
2.引入本npm包並注冊為vue的組件：

  
  
  
          

            例如：在需要使用的vue頁面中： 
          
```<template>
    &lt;!-- 里面寫ele-table組件--&gt;
    &lt;ele-table :data="tableData" treetable style="width: 100%"&gt;
      &lt;ele-table-column prop="id" label="姓名"&gt;
        &lt;template slot-scope="scope"&gt;
          &lt;div :style="`padding-left:${20*(scope.row._indent-1)}px`"&gt;
            &lt;span  v-if="scope.row.children"&gt;
              &lt;i v-if="scope.row._expand" &gt;-&lt;/i&gt;&lt;i v-else&gt;+&lt;/i&gt;
            &lt;/span&gt;
            &lt;span&gt;{{scope.row.id}}&lt;/span&gt;
          &lt;/div&gt;
        &lt;/template&gt;
      &lt;/ele-table-column&gt;
      &lt;ele-table-column prop="id" label="年齡" width="180"&gt;
      &lt;/ele-table-column&gt;
      &lt;ele-table-column
        prop="label"
        label="地址"&gt;
      &lt;/ele-table-column&gt;
    &lt;/ele-table&gt;
    &lt;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%"&gt;
      &lt;ele-table-column prop="id" label="姓名"   width="180"&gt;
      &lt;/ele-table-column&gt;
      &lt;ele-table-column
        prop="id"
        label="年齡"
        width="180"&gt;
      &lt;/ele-table-column&gt;
      &lt;ele-table-column
        prop="label"
        label="地址"&gt;
      &lt;/ele-table-column&gt;
    &lt;/ele-table&gt;
&lt;/template&gt;

&lt;script&gt;
import { eleTable, eleTableColumn } from "ele-table";
import 'ele-table/dist/ele-table.css'; 
//項目引入element-ui 不需要引入樣式,但需要class類指定拖拽樣式
//&lt;style&gt;
    //.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;
    //} 
//&lt;/style&gt;
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 &gt; 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 &gt; 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);
          }
        },
    },
   }
}
&lt;/script&gt;


<h3>Calendar Attributes</h3>
<table>
<thead><tr>
<th>參數</th>
<th>說明</th>
<th>類型</th>
<th>可選值</th>
<th>默認值</th>
</tr></thead>
<tbody>
<tr>
<td>data</td>
<td>顯示的數據</td>
<td>array</td>
<td>—</td>
<td>—</td>
</tr>
<tr>
<td>treetable</td>
<td>是否樹形數據</td>
<td>boolean</td>
<td>—</td>
<td>false</td>
</tr>
<tr>
<td>_expand</td>
<td>樹形數據默認展開節點（不支持遞歸關聯）</td>
<td>boolean</td>
<td>—</td>
<td>false</td>
</tr>
<tr>
<td>draggablerow</td>
<td>是否開啟行拖拽</td>
<td>boolean</td>
<td>—</td>
<td>false</td>
</tr>
<tr>
<td>draggable</td>
<td>是否開啟單元格拖拽</td>
<td>boolean</td>
<td>—</td>
<td>false</td>
</tr>
<tr>
<td>allow-drag</td>
<td>能否被拖拽</td>
<td>Function(row(行數據), column(行拖拽為index,單元格為所在列), cell(節點), event)</td>
<td>—</td>
<td>要求返回boolean</td>
</tr>
<tr>
<td>allow-drop</td>
<td>能否被放置</td>
<td>Function(row, column, cell, event, type)</td>
<td>—</td>
<td>要求返回boolean</td>
</tr>
</tbody>
</table>
<h3>Calendar Events</h3>
<table>
<thead><tr>
<th>事件名</th>
<th>說明</th>
<th>參數</th>
</tr></thead>
<tbody>
<tr>
<td>node-drag-start</td>
<td>節點開始拖拽時觸發的事件</td>
<td>Function(row(行數據), column(行拖拽為index,單元格為所在列), cell(節點), event)</td>
</tr>
<tr>
<td>node-drag-enter</td>
<td>拖拽進入其他節點時觸發的事件</td>
<td>Function(row(行數據), column(行拖拽為index,單元格為所在列), cell(節點), event, draggingNode(被拖拽節點)</td>
</tr>
<tr>
<td>node-drag-leave</td>
<td>拖拽離開某個節點時觸發的事件</td>
<td>Function(row(行數據), column(行拖拽為index,單元格為所在列), cell(節點), event, draggingNode(被拖拽節點)</td>
</tr>
<tr>
<td>node-drag-over</td>
<td>在拖拽節點時觸發的事件</td>
<td>Function(row(行數據), column(行拖拽為index,單元格為所在列), cell(節點), event, draggingNode(被拖拽節點)</td>
</tr>
<tr>
<td>node-drag-end</td>
<td>拖拽結束時觸發的事件</td>
<td>Function(dragging(被拖拽節點對象), drop(放置節點對象), dropType(放置位置（before、after、inner）), event)</td>
</tr>
<tr>
<td>node-drop</td>
<td>拖拽完成時觸發的事件</td>
<td>Function(dragging(被拖拽節點對象), drop(放置節點對象), dropType(放置位置（before、after、inner）), event)</td>
</tr>
</tbody>
</table>

來源：https://segmentfault.com/a/1190000016123145