html表头和内容错位,el-table表头根据内容自适应，解决表头错位和固定列错位（完美解决）...

将代码复制到指令中便可使用。经过指令方式进行调用。(使用方式 )

经过计算文字的宽度进行表头设置，其余内容没法计算。

5000个单元格以上根据实际状况使用以上根据实际状况使用，由于单元格越多，计算时间越长。

尽可能使用v-if，否则有些状况下会计算错误。

Vue.directive("tableFit", {

bind(el, binding, vnode) {

setTimeout(() => {

setColumnWidth(el, vnode);

}, 0)

},

//指令所在组件的 VNode 及其子 VNode 所有更新后调用。

componentUpdated(el, binding, vnode) {

setTimeout(() => {

setColumnWidth(el, vnode);

}, 0)

},

});

function setColumnWidth(table, vnode) {

//中文和全角正则

const CN = new RegExp("[\u4E00-\u9FA5]|[\uFF00-\uFFFF]");

const NUM = new RegExp("[0-9]");

//中文和全角字体的像素宽度比例

const CN_RATE = 1.1

//数字字体的像素宽度比例

const NUM_RATE = 0.7

//其余字体的像素宽度比例

con