vue 结合原生tabe 渲染表格 实现 固定头部、固定右侧、单选按钮、单元格拖拽监听位置

1.vue 结合原生tabe 渲染表格 实现 固定头部、固定右侧、单选按钮(避免el-table 数据量大卡顿)

// table.vue
<template>
    <div id="oldTable" v-if="headerData.length && tableData.length">
        <div class="table-scroll-mod" :style="{height: height+ 'px'}">
            <div class="table-scroll-box" :style="{height: height+ 'px'}" ref="tableScrollBox">
                <div class="fixed-head" ref="tableFixedHead">
                    <table>
                        <thead>
                        <tr>
                            <th v-if="checkBox" :width="checkBoxWidth">
                                <div class="te_cell">
                                    <input type="checkbox" v-model="isAllCheck" @click="checkAll" name="table"
                                           value="all"/>
                                </div>
                            </th>
                            <th :width="item.width || 100" v-for="(item, index) in headerCol" :key="index"
                                v-if="item.prop !== 'checkbox'">
                                <div class="te_cell">{
   {
   item.label}}</div>
                            </th>
                        </tr>
                        </thead>
                    </table>
                </div>
                <div class="fixed-right" :class="isMac ? '' : 'fixed-right_h'" ref="tableFixedRight"
                     :style="{width: (headerCol[rightIndex].width || 100) + 'px'}">
                    <table>
                        <thead>
                        <tr>
                            <td :width="headerCol[rightIndex].width">
                                <div class="te_cell">{
   {
   headerCol[rightIndex].label}}</div>
                            </td>
                        </tr>
                        </thead>
                        <tbody>

                        <tr v-for="(item, index) in tableData" :key="index">
                            <td :width="headerCol[rightIndex].width">
                                <div class="te_cell">
                                    <slot name="fixedRight" :row="item"></slot>
                                </div>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <div class="fixedTopRight" :style="{width: (headerCol[rightIndex].width || 100) + 'px'}">
                    <span class="te_cell">{
   {
   headerCol[rightIndex].label}}</span>
                </div>
                <table class="table-content__warrp">
                    <thead>
                    <tr>
                        <th :width="item.width" v-for="(item, index) in headerCol" :key="index">
                            <div class="te_cell">{
   {
   item.label}}</div>
                        </th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="(item, index) in tableData" :key="index">
                        <td :width="checkBoxWidth">
                            <div class="te_cell" v-if="checkBox">
                                <input type="checkbox" name="table" v-model="checkBoxList[index]"
                                       @click="checkItem(item, index)" :value="index"/>
                            </div>
                        </td>
                        <td :width="child.width || 100" v-for="(child, index_c) in headerCol" :key="index_c"
                            v-if="child.prop !== 'checkbox'"
                            :draggable="draggable"
                            @dragstart="onDragstart($event, item, child.prop)"
                            @dragend="onDragend($event)"
                            @dragover="onDragover($event)"
                            @drop="onDrop($event, item, child.prop)">
                            <div class="te_cell" v-if="child.slot">
                                <slot :name="child.slot" :row="item"></slot>
                            </div>
                            <div class="te_cell" v-if="!child.slot">{
   {
   item[child.prop]}}</div>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</template>
<script type="text/ecmascript-6">
    const IS_MAC = function () {
   
        return /macintosh|mac os x/i.test(navigator.userAgent);
    }();

    function throttle(delay, noTrailing, callback, debounceMode) {
   
        var timeoutID;
        var cancelled = false;
        var lastExec = 0;

        function clearExistingTimeout() {
   
            if (timeoutID) {
   
                clearTimeout(timeoutID);
            }
        }

        function cancel() {
   
            clearExistingTimeout();
            cancelled = true;
        }

        if (typeof noTrailing !== 'boolean') {
   
            debounceMode = callback;
            callback = noTrailing;
            noTrailing =