1.vue 结合原生tabe 渲染表格 实现 固定头部、固定右侧、单选按钮(避免el-table 数据量大卡顿)
// table.vue<template><div v-if="headerData.length && tableData.length"><div :style="{height: height+ px}"><div :style="{height: height+ px}" ref="tableScrollBox"><div ref="tableFixedHead"><table><thead><tr><th v-if="checkBox" :width="checkBoxWidth"><div><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>{{item.label}}</div></th></tr></thead></table></div><div :class="isMac ? \ : fixed-right_h\" ref="tableFixedRight":style="{width: (headerCol[rightIndex].width || 100) + px}"><table><thead><tr><td :width="headerCol[rightIndex].width"><div>{{headerCol[rightIndex].label}}</div></td></tr></thead><tbody><tr v-for="(item, index) in tableData" :key="index"><td :width="headerCol[rightIndex].width"><div><slot name="fixedRight" :row="item"></slot></div></td></tr></tbody></table></div><div :style="{width: (headerCol[rightIndex].width || 100) + px}"><span>{{headerCol[rightIndex].label}}</span></div><table><thead><tr><th :width="item.width" v-for="(item, index) in headerCol" :key="index"><div>{{item.label}}</div></th></tr></thead><tbody><tr v-for="(item, index) in tableData" :key="index"><td :width="checkBoxWidth"><div 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 v-if="child.slot"><slot :name="child.slot" :row="item"></slot></div><div 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 !== oolean) {debounceMode = callback;callback = noTrailing;noTrailing =
