ElementUI-table拖动表头并更新数据示例

[Kelichao]

注意

• 1.会有表格头拖动后不更新视图的问题，用key解决。

• 2.改变数据源，组件不触发更新是因为javascript限制，所以数组用splice处理，或者用Vue.set()方法来触发 vue数组更新检测

  
  <template>
  <div class="g-table">
  
      <!-- 保存布局开始 -->
      <div class="g-table_head f-df f-aic ">
          <div class="f-f1">
              <slot name="head"></slot>
          </div>
          <div v-if="layoutOpen" class="g-table_head_right f-df" style="position:relative;">
              <span class="select_tip">列</span>
              <el-select v-model="value11" multiple size="mini" collapse-tags style="margin-right: 20px" placeholder="" @change="selectChange">
                  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
              </el-select>
              <el-button type="" icon="el-icon-check" @click="saveLayout" size="mini">保存布局</el-button>
          </div>
      </div>
      <!-- 保存布局结束 -->
  
      <div class="g-table_sort" v-if="sortTypeList.length">
          <label>排序：</label>
          <el-tag class="g-table_sort_tag" @close="tagClose(tag)" size='small' v-for="(tag) in sortTypeList" :key="tag.label"
           closable v-if="tag.sortType" :type="tag.sortType">
              {{tag.label}}
          </el-tag>
      </div>
  
      <!-- 表格体开始 -->
      <div class="g-table_body">
          <el-table :data="tableData" header-cell-class-name="" highlight-current-row @current-change="currentChange"
           @selection-change="handleSelectionChange" ref="table">
              <el-table-column v-if=tableBox type="selection" width="55"></el-table-column>
  
              <template v-for="item in tableHeader">
  
                  <!-- 格式化字段开始 -->
                  <el-table-column :prop="item.prop" :label="item.label" :width="item.width" :formatter="item.formatter"
                   :render-header="renderHeader" :key="item.key">
                      <template slot-scope="scope">
  
                          <template v-if="item.hide"></template>
                          <template>
                              <template>
                                  <slot name="temp" :item=item :data="tableData[scope.$index][item.prop]" :row="tableData[scope.$index]">{{tableData[scope.$index][item.prop]}}</slot>
                              </template>
                          </template>
                      </template>
                  </el-table-column>
                  <!-- 格式化字段结束 -->
  
              </template>
          </el-table>
  
          <el-pagination v-if=pageFlag :small="true" @size-change="handleSizeChange" @current-change="handleCurrentChange"
           :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="10" layout="total, sizes, prev, pager, next, jumper"
           :total="pageTotal">
          </el-pagination>
      </div>
      <!-- 表格体结束 -->
  </div>
  </template>

  <style lang="scss">
    .g-table_head_right{
      position:relative;
      .el-select__tags{
        opacity:0;
      }
      .el-tag__close{
        display:none
      }
    }
    .gthead-cell{
      padding:0 !important;
      margin:0 !important;
      opacity : 0.99;
      width:100%;
      cursor:move;
      display:flex !important;
      align-items:center;
      a{
        cursor:move;
      }
      .display-none{
        display:none
      }
      .sort{
        cursor:pointer;
        display:flex;
        i{
          font-size:18px
        }
      }
    }
    .gthead-cell-enterBg{
      background:#2F6298;
      color:#fff;
    }
    .g-table_body{
      .el-table{
        th{
          padding:0;
        }
      }
    }
    .el-select-dropdown.is-multiple {
      .el-select-dropdown__item{
        padding: 0 24px 0 10px;
      }
      .el-select-dropdown__item.selected:after{
        right:5px;
      }
    }
  </style>