vue+elementui实现多功能table（拖拽、点击、状态变色、动态button、动态隐藏列等）

vue+elementui实现多功能table（拖拽、点击、状态变色等）

<template>
  <div class="form_table">
    <div class="w-table" :class="{'w-table_moving': dragState.dragging}">
      <el-table
        stripe
        :ref
        :header-cell-style="{background:'#eef1f6',color:'#606266'}"
        :data="TableList"
        :border="tableOption.border"
        :height="tableOption.minHeight"
        :max-height="tableOption.maxHeight"
        :style="{ width: parseInt(tableOption.width)+'px' }"
        :header-cell-class-name="headerCellClassName"
        @selection-change="handleSelectionChange"
        v-loading="loading"
        element-loading-text="加载中..."
        :cell-style="CellClassName"
        :row-class-name="tableRowClassName"
        @row-click="RowClick"
      >
        <el-table-column
          v-if="showSelection"
          fixed="left"
          type="selection"
          label="全选"
          prop="supplierid"
          align="center"
        ></el-table-column>
        <el-table-column type="index" label="序号" width="50px" align="center" fixed="left">
          <template slot-scope="scope">
            <span>{
   {
   scope.$index + 1}}</span>
          </template>
        </el-table-column>

        <el-table-column
          sortable
          v-for="(col, index) in tableHeader"
          :key="index"
          align="center"
          :prop="col.prop"
          :label="col.label"
          :width="col.width"
          :min-width="col.minWidth"
          :type="col.type"
          :header-align="col.headerAlign"
          :column-key="index.toString()"
          :render-header="renderHeader"
          :formatter="col.formatter"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          fixed