1. 父元件

<el-main v-loading="loading">
      <my-table
        :data="tyData" //表格資料
        @selectionchange="selectionchange" //複選框多選
        @getTableData="getdata" //獲取列表資料
        @showdialog="showdialog" //開啟彈框
        @editpro="editpro" //啟動編輯
        @selectAll="selectionAll" //全選
        @handleRowClick="handleRowClick" //無複選框時單選
        ref="districtTable"
      >
       //插槽
       <template slot="operation" slot-scope="{row, $index}">
          <p>編輯</p>
        </template>
     </my-table>
</el-main>

2. 子元件

<vxe-table
      border
      resizable
      show-overflow
      keep-source
      ref="table_tree"
      show-header-overflow
      :max-height="tableMaxHeight"
      :data="data.tableData"
      :edit-config="data.isedit ? {trigger: 'click', mode: 'cell', showIcon: false} : {showIcon: false}"
      :checkbox-config="{checkStrictly: checkStrictly, showHeader: true}"
      @edit-actived="editDisabledEvent"
      @checkbox-all="checkboxAll"
      @checkbox-change="handleSelectionChange"
      @radio-change="handleRowClick"
      :tree-config="data.isTree ? {transform: true, rowField: 'Keyoid', parentField: 'parentId', expandAll: true} : {}"
      @toggle-tree-expand="toggleExpandChangeEvent"
      :custom-config="{storage: true}"
      :column-config="{isCurrent: true, isHover: true, resizable: true}"
      :row-config="{isCurrent: true, isHover: true}"
      :column-key="true"
      id="fk_table"
      @resizable-change="resizableChange"
      class="mytable-scrollbar"
      @custom="toolbarCustomEvent"
      :scroll-y="{mode: 'wheel'}"
      :scroll-x="{gt: 10}"
      @current-change="handleRowClick"
      :header-cell-style="headerCellStyle"
      :cell-style="cellStyle"
      :row-style="rowStyle"
 

    >
      <vxe-column type="checkbox" width="60" v-if="data.selection" fixed="left"></vxe-column>
      <vxe-column
        v-for="(col, index) in data.column"
        :key="index"
        :field="col.prop"
        :title="col.label"
        :align="col.align || 'center'"
        :width="col.width"
        :fixed="col.fixed ? 'left' : ''"
        :min-width="col.minWidth"
        :edit-render="{}"
        :show-header-overflow="col.showOverflowTooltip"
        :sortable="col.sortable ? col.sortable : false"
        :resizable="true"
        v-if="col.isShow"
        :tree-node="index === 0"
      >
        <template #default="{ row }">
          <p
            class="p_word"
            v-html="showData(col.prop, row[col.prop], row)"
            @click="showdialog(row, col)"
            :class="{blue: col.type == 'dialog'}"
          ></p>
        </template>
        <template #edit="{ row }">
          <slot v-if="col.slot" :name="col.prop" :row="row"></slot>
          <div v-else>
            <el-input
              v-if="col.type == 'input'"
              v-model="row[col.prop]"
              @input="
                val => {
                  integerValue(row, col.prop, val);
                }
              "
              type="text"
              :disabled="col.disabled"
              style="width:100%;padding:2px"
            ></el-input>
          </div>
        </template>
      </vxe-column>
      <vxe-column title="操作" min-width="100" v-if="data.operation" fixed="right">
        <template #default="{ row }">
          <slot name="operation" :row="row"></slot>
        </template>
      </vxe-column>
    </vxe-table>

子元件方法詳解

1.列拖動 

安裝sortablejs，並在子元件引入

import Sortable from 'sortablejs'

　　實現

mounted() {
    this.columnDrop1();
  },

//列拖動
    columnDrop1() {
      this.$nextTick(() => {
        let xTable = this.$refs.table_tree;
        this.sortable = Sortable.create(
          xTable.$el.querySelector('.body--wrapper>.vxe-table--header .vxe-header--row'),
          {
            handle: '.vxe-header--column',
            onEnd: ({newIndex, oldIndex}) => {
              console.log(newIndex, oldIndex);
              let tableColumn = xTable.getColumns();
              let currRow = tableColumn.splice(oldIndex, 1)[0];
              tableColumn.splice(newIndex, 0, currRow);
              xTable.loadColumn(tableColumn);
              //此處可根據實際需求寫
            }
          }
        );
      });
    },

2.列寬改變

在vxe-table標籤設定 

:custom-config="{storage: true}"
:column-config="{isCurrent: true, isHover: true, resizable: true}"
@resizable-change="resizableChange"

　　方法呼叫

//列寬改變
    resizableChange({$rowIndex, column, columnIndex, $columnIndex, $event}) {
      console.log($rowIndex, column, columnIndex, $columnIndex, $event);
    },

　　3.樣式設定.

https://xuliangzhan_admin.gitee.io/vxe-table/#/table/base/style  文件詳細描述